我有一行包含 3 列:第一列和最后一列设置为 size: auto
属性,第二列占用剩余的可用空间:
<ion-grid>
<ion-row nowrap justify-content-center align-items-center>
<ion-col size="auto">
<p>I</p>
</ion-col>
<ion-col class="long-text">
<p>A text that makes this column exceeds the width of the row</p>
</ion-col>
<ion-col size="auto">
<p>III</p>
</ion-col>
</ion-row>
</ion-grid>
然后,为了剪切长文本,我使用了以下 scss 代码:
ion-grid {
ion-row {
ion-col {
&.long-text {
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
但这似乎不起作用,包含长文本的列会拉伸(stretch)与文本的宽度一样长,并超过其父行的宽度
我正在寻找一种方法,当文本占用太多空间时,显示文本末尾的三个点,同时保留行内的所有列。
最佳答案
通过直接将文本传递到 ion-col
而不将其包装在另一个元素中,解决了我的问题:
<ion-grid>
<ion-row nowrap justify-content-center align-items-center>
<ion-col size="auto">
<p>I</p>
</ion-col>
<ion-col class="long-text">
A text that makes this column exceeds the width of the row
</ion-col>
<ion-col size="auto">
<p>III</p>
</ion-col>
</ion-row>
</ion-grid>
ion-grid {
ion-row {
ion-col {
&.long-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
关于html - 当文本内容太长时,列宽超过行宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57228423/