微信小程序超出文本显示省略号

在做微信小程序的时候，遇到文本超出情况，我们通常希望把超出文本显示为省略号。

单行文本有时候我们可以依靠截取字符串的长度显示，但是在不同情况下所要截取长度不同，而且有时候可能会遇到中英文连接在一起，这个时候依靠截取字符串的字数更是会造成不好的体验。

-单行文本超出：(建议设置一个宽度，默认为100%)

.team-content {

width: 500rpx;

display:-webkit-box;

-webkit-line-clamp:1;

overflow:hidden;

text-overflow:ellipsis;

-webkit-box-orient:vertical;

word-break:break-all;

}

-多行文本超出：

.homework {

display: -webkit-box; / 设置为弹性盒子 /

-webkit-line-clamp: 5; / 最多显示5行 /

overflow: hidden; / 超出隐藏 /

text-overflow: ellipsis; / 超出显示为省略号 /

-webkit-box-orient: vertical;

word-break: break-all; / 强制英文单词自动换行 /

}

就是看到的这个样子，其实单行文本只是比多行文本多加了一个宽度而已。

作者：坐在天台吹吹风

链接：https://www.jianshu.com/p/ecf3910e2008

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。