text-overflow原本是CSS3的一个属性。在微信小程序中也支持。下面我们一步步的进行~
text-overflow文本溢出显示省略号~
注：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素）
1、一行文本溢出显示省略号
overflow: hidden; white-space:nowrap; text-overflow: ellipsis; 1》要实现这个功能，除了text-overflow: ellipsis;是必须之外，还必须满足：
overflow: hidden; /*隐藏溢出的文本 */white-space:nowrap; /*不换行 */
2》帮助理解实例
先上效果：
源码：
wxml代码：
view textssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss/text/viewwxss代码：
text{ display: inline-block; width: 400rpx; border: 1rpx solid gray; margin: 30rpx 60rpx; overflow: hidden; /*隐藏溢出的文本 */ white-space:nowrap; /*不换行 */ text-overflow: ellipsis; }2、多行文本的最后一行溢出显示省略号
1》需要满足以下：
display: -webkit-box ; overflow: hidden; /*隐藏溢出的文本 */ text-overflow: ellipsis; word-break: break-all;/*自动换行*/ -moz-box-orient: vertical; /*从上到下自动排列子元素*/ -webkit-box-orient: vertical; -webkit-line-clamp:2; /*显示的行数*/ 2》下面结合实例看效果
源码：
wxml代码
与前面一样~
wxss代码
text{ display: inline-block; width: 400rpx; border: 1rpx solid gray; margin: 30rpx 60rpx; display: -webkit-box ; overflow: hidden; /*隐藏溢出的文本 */ text-overflow: ellipsis; word-break: break-all;/*自动换行*/ -moz-box-orient: vertical; /*从上到下自动排列子元素*/ -webkit-box-orient: vertical; -webkit-line-clamp:2; /*显示的行数*/ }
