纯CSS实现多行文字截断的示例代码

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图:

看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:

兼容性好,对各大主流浏览器有好的支持

响应式截断,根据不同宽度做出调整

文本超出范围才显示省略号,否则不显示省略号

省略号位置显示刚好

基于上述的准则,下面我就讲介绍各种技巧实现截断效果,并根据上述的评判标准得出最优解。(代码我都传到 jsfiddle 平台,可点击 demo 地址查看)

单行文本截断 text-overflow

文本溢出我们经常用到的应该就是 text-overflow: ellipsis 了,相信大家也很熟悉,只需轻松几行代码就可以实现单行文本截断。

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

实现效果:

属性浏览器原生支持,各大浏览器兼容性好,缺点就是只支持单行文本截断,并不支持多行文本截取。

适用场景:单行文字截断最简单实现,效果最好,放心使用。

如果是多行文字截取效果,实现起来就没有那么轻松。

-webkit-line-clamp 实现

先介绍第一种方式,就是通过 -webkit-line-clamp 属性实现。具体的方式如下:

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

它需要和 display、-webkit-box-orient 和 overflow 结合使用:

display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient; 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

text-overflow: ellipsis; 可选属性,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

实现效果:

从效果上来看,它的优点有:

1.响应式截断,根据不同宽度做出调整
2.文本超出范围才显示省略号,否则不显示省略号
3.浏览器原生实现,所以省略号位置显示刚好

但是缺点也是很直接,因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

使用场景:多用于移动端页面,因为移动设备浏览器更多是基于 webkit 内核,除了兼容性不好,实现截断的效果不错。

定位元素实现多行文本截断

另外还有一种靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现,实现方式如下:

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字。

实现效果:

从实现效果来看,它所具备的优点:

1.兼容性好,对各大主流浏览器有好的支持
2.响应式截断,根据不同宽度做出调整

但是它无法识别文字的长短,即文本超出范围才显示省略号,否则不显示省略号。还有因为是我们人为地在文字末尾添加一个省略号效果,就会导致它跟文字其实没有贴合的很紧密,遇到这种情况可以通过添加 word-break: break-all; 使一个单词能够在换行时进行拆分。

纯CSS实现多行文字截断的示例代码

扫一扫手机访问