越出长度后会自行的截掉多出部分的文字

2020-07-02 09:36:09 浏览数 (1)

在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，我们可以通过js的方式来实现，但是感觉太麻烦，使用css我们就可以非常好的实现这个效果，下面请看代码

代码语言：javascript复制

.hh {
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
 }

如此便实现了截掉多余文字以省略号结束。

如果是在table中的td里实现这个效果，需要给table设置一个样式table-layout: fixed;width:XXXpx;

2018-3-29 更新

上面说的方法是想让文本在一行显示，多余的以省略号结束。那么有的情况下需要多行文本，超出行数后也是省略号，那么久需要用的下面的方法。

代码语言：javascript复制

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

上面代码的例子是让文本在两行内显示，如果超出了则显示省略号。

这种方法有一定的兼容性，兼容性如下所示

0 人点赞