尽量减少显示在离子文本上的文本行
尽量减少显示在离子文本上的文本行
提问于 2020-02-04 10:42:58
HTML:
<ion-list *ngFor="let message of messages">
<ion-item lines="none" type="button" button="true">
<ion-grid>
<ion-row>
<ion-col class="message">
<ion-text>
{{ message.text }}
</ion-text>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>CSS:
.message {
color: var(--ion-color-default-shade) !important;
border-radius: 5px;
padding: 8px;
max-height: 110px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4em;
}我只想显示3行<ion-text>。如果它还不止这些，那么我想显示一个省略号，这样用户就可以点击它来查看更多内容。但是，我上面的代码似乎并没有以省略号显示HTML。不知道我错过了什么。任何建议都是有用的。
回答 2
Stack Overflow用户
发布于 2020-02-04 10:53:37
试试这个..。这里，ellipsis.将确保文本不会换到下一行，并将!important添加到!important中。
.message {
white-space: nowrap !important;
width: 150px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: var(--ion-color-default-shade) !important;
}希望这有帮助..。:)
Stack Overflow用户
发布于 2020-02-04 11:02:02
text-overflow: ellipsis使用white-space: nowrap CSS。这是一个单线事件。但是，如果您想在多行文本上使用省略号，就像这里的情况一样--那么不要期望有任何乐趣。CSS没有这样做的标准方法。
但是，您可以通过带有字符计数的java脚本来管理它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60055621
复制相关文章
相似问题
腾讯云开发者
