如何将所有列保留在Ionic> = 2的单个离子行中

Question

我的离子2应用程序中有一个页面，其中包含一大堆项目，每个项目只需一行。

可以在this plkr

看到一个简化示例

查看第一行，我有3列（红色，灰色和橙色）。

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

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

有没有办法让第三列保持在同一行，并且只要它在那里用完房间时就显示省略号（例如下面的......）？我已经尝试了一切！

提前感谢您的帮助。

Answer 1

尝试使用此解决方案：

将以下课程应用于最后一栏：

 .last-col{
        width: 1%;
 }

推理：这里我们将覆盖 .col类的宽度，该宽度由框架指定为100％，并且由于此覆盖的第三列最初获得其容器宽度的1％，然后来自.col类的魔法（即flex-grow：1）属性可以完成所有操作。

flex-grow definition ：它告诉我们可用空间的数量（现在我们有可用空间，因为我们只指定/使用了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%;
}  

Answer 2

您可能希望将col-auto添加到行中的最后一个col输入。 REF

<ion-row>
  <ion-col col-1> 1 </ion-col>
  <ion-col col-2> image </ion-col>
  <ion-col col-auto> aaaaaazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzazazaaaa </ion-col>
</ion-row>