小程序的text-overflow

ゝ一世哀愁。 2022-05-28 01:38 183阅读 1赞

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》帮助理解实例

先上效果：

![20180327152453446][]

源码：

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》下面结合实例看效果

![20180327152533435][]

源码：

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

[20180327152453446]: /images/20220528/7ce1541783e04840942c2147884f06e3.png
[20180327152533435]: /images/20220528/182591f6f3474cf7b891015d2957db98.png