我的离子2应用程序中有一个页面,其中包含一大堆项目,每个项目只需一行。
可以在this plkr
看到一个简化示例查看第一行,我有3列(红色,灰色和橙色)。
我希望前两列保持固定宽度,并让最后一列占据行的其余部分。如果文本太长,我只是想截断并显示省略号(我使用style='white-space: nowrap; overflow: hidden;text-overflow: ellipsis
现在,如果我缩小页面的宽度,最后一列移动到其他行......
有没有办法让第三列保持在同一行,并且只要它在那里用完房间时就显示省略号(例如下面的......)?我已经尝试了一切!
提前感谢您的帮助。
答案 0 :(得分:3)
尝试使用此解决方案:
将以下课程应用于最后一栏:
.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%;
}
答案 1 :(得分:0)
您可能希望将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>