html实现多行缩略显示,css高级应用三种方法实现多行省略的示例代码

前言

这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用 -webkit-line-clamp 的方案。

如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更合不合适的，当然，前提是我的文章流量够多，能被顶上去你才有机会看到。

这里介绍三种多行文本截断的方法，当然第一种就是你看到想吐的 -webkit-line-clamp 方案，不想看就直接跳到第二种方法开始看啦。

使用-webkit-line-clamp

对多行文本的容器应用如下样式

div {

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

-webkit-line-clamp: 2;

}

除了 -webkit-line-clamp 其他属性固定不变，主要是将对象作为弹性伸缩盒子模型显示，并设置伸缩盒对象的子元素的排列方式。

而 -webkit-line-clamp 是用来控制多少行进行省略

优点：

浏览器原生支持的省略行为，样式看起来很舒服

简单方便使用

缺点：

看属性的前缀就知道，这是 webkit 内核的浏览器支持的，兼容性不是广泛。

使用场景

如果你只针对webkit内核浏览器或者移动端(移动端浏览器多数是webkit内核)，那么使用该方案是最好的了。

利用绝对定位

这个方案其实很好理解的，首先我们对于一个装内容的容器右边预留一个空间用来放省略号，用 padding-right: 1em; 来预留空间，为啥是1em呢，一个省略号差不多就是1em啦，用em单位是为了响应字体大小。

用绝对定位把省略号定位在这个预留的空间右下角。

html

内容

css

.wrap3 {

position: relative;

padding-right: 1em;

/*max-height是line-height的几倍，想最多显示多少行就几倍*/

max-height: 3.6em;

line-height: 1.2em;

text-align: justify;

overflow: hidden;

}

.wrap3:before {

position: absolute;

right: 0;

bottom: 0;

content: '...';

}

效果(多内容时)：

这样的话，省略号永远都会存在的。所以要解决这个问题，我们用一个跟背景颜色一样的方块遮住省略号，那么关键点就是，怎么知道何时要遮住，何时不遮住呢？

思路： 用于挡住省略号的方块也是绝对定位，靠右定为， right: 0 ，但是 bottom 值就不要设置了，如果不设置的话，该方块会跟着文本内容的实际高度移动，而不是 max-height 的高度。这样的话，当不需要省略时(即不超过 max-height )时，就刚好是 bottom: 0 的情况，就会挡住省略号。当要进行省略时(即超过 max-height )就会挡不住省略号了，它自己也会被 overflow: hidden 给隐藏掉了。

所以最终方案是：

html

内容

css

.wrap {

position: relative;

/*line-height和height要相互配合，显示多少行就省略，就是line-height多少倍数*/

line-height: 1.2em;