html - 如何在 Ionic >= 2 中将所有列保持在单个 ionic 行中

Question

我的 ionic 2 应用程序中有一个页面，其中有一大堆元素，其中每个元素占一行。

可以在 this plkr 看到一个简化的例子

查看第一行，我有 3 列(红色、灰色和橙色)。

我希望前两列保持固定宽度，并让最后一列占据该行的其余部分。如果文本太长，我只希望它截断并显示省略号(我使用 style='white-space: nowrap; overflow: hidden;text-overflow: ellipsis

现在，如果我缩小页面的宽度，最后一列将移动到其他行的下方....

有没有办法让第三列保持在同一行，并且在空间不足时显示省略号(如下所示...)？我什么都试过了!

在此先感谢您的帮助。

Answer 1

试试这个解决方案:

将以下类应用到最后一列:

 .last-col{
        width: 1%;
 }

---

推理:这里我们覆盖了框架指定为 100% 的 .col 类 的宽度，由于这个覆盖，第三列最初获得 1%其容器的宽度，然后来自 .col 类的魔术(即 flex-grow: 1)属性完成了所有的技巧。

flex-grow 定义:它告诉我们内部有多少可用空间(现在我们有可用空间，因为我们只指定/使用了 4px+ 30px+ 1% )元素应该占用的 flex 容器。

.col {
    position: relative;
    padding: 5px;
    width: 100%; // we are overriding this field
    margin: 0;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}