在微信小程序中,文本超出显示长度时候自动截取并末尾显示省略号,分为两种情况,一是单行,二是多行。
/* 单行文本 */
.textEllipsisSig{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 多行文本 */
.textEllipsisMul{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
但是,在使用时候,一定要设置当前文本的固定宽度,否则这个css样式不生效。
<view class="textEllipsisSig" style="width: 500rpx;">
我是超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的单行文本
</view>
上述代码中width: 500rpx;
一定不能少。