小程序的text-overflow

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>
    <text>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</text>
</view>

wxss代码：

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; /*显示的行数*/
 
}