当文本内容太长时，列超过行的宽度
当文本内容太长时，列超过行的宽度
提问于 2019-07-27 01:08:22
我有一个包含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;
}
}
}
}
}但是这似乎不起作用，包含长文本的列与文本的宽度一样长，并且超过了其父行的宽度
我正在寻找一种方法来显示三个点在文本的末尾，当它占用太多的空间，同时保持所有列在行内。
Stack Overflow用户
发布于 2019-07-27 08:00:21
所以基本上所有的列都可以根据内容的大小而变化，对吧？
您需要对所有列执行size="auto"或col-auto操作，使用长文本的ion-col需要有固定的宽度才能使省略号工作。
例如，参见这个stackblitz。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57228423
复制相关文章
相似问题
腾讯云开发者
