你不知道的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内核浏览器或者移动端