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

在做微信小程序的时候，遇到文本超出情况，我们通常希望把超出文本显示为省略号。
单行文本有时候我们可以依靠截取字符串的长度显示，但是在不同情况下所要截取长度不同，而且有时候可能会遇到中英文连接在一起，这个时候依靠截取字符串的字数更是会造成不好的体验。

-单行文本超出：(建议设置一个宽度，默认为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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。