Document

--- theme: channing-cyan --- > 大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：**frontendpicker**，一起学习交流前端，成为更优秀的工程师～关注公众号：**[搞前端的半夏](http://www.sylblog.xin/)**,了解更多前端知识! [点我](http://sylblog.xin/)探索新世界！ ## 前言最近在浏览掘金的时候，在首页看到了发现了这样一个有趣的现象： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5421e011b064fd7a865e89fe770aec8~tplv-k3u1fbpfcp-watermark.image?) 大家仔细看有啥不同，~~一个是广告，一个是文章~~。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73094aabc2904698a8340cd6e8e39665~tplv-k3u1fbpfcp-watermark.image?) ## line-clamp 它只有在 [`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 属性设置成 `-webkit-box` 或者 `-webkit-inline-box` 并且 [`-webkit-box-orient` (en-US)](https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient "Currently only available in English (US)") 属性设置成 `vertical`时才会生效。 ## 语法 ``` .元素 { line-clamp: [none | ]; } ``` 设置截断内容前的最大行数，然后在最后一行的末尾显示省略号 (...) 目前在使用的时候必须是 **-webkit-line-clamp** 这个是因为line-clamp是CSS3提出的，目前的兼容性不好。虽然caniuse上很好！ Chrome实测： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/524d61c2c24244ed9e8634c839b3e8e6~tplv-k3u1fbpfcp-watermark.image?) ## 举例 ```HTML Document

大家仔细看有啥不同，~~一个是广告，一个是文章~~。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af2800240b934356a539c643a4e607d2~tplv-k3u1fbpfcp-watermark.image?) 这里的省略号应呈现为 Unicode 字符 (U+2026) ### 不要滥用height 当容器高度大于内容高度，其他内容也会显示出来，当然省略号仍然在 ```CSS div { width: 300px; height:300px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff485b3d78c642b2b1096f9acd387125~tplv-k3u1fbpfcp-watermark.image?) 当容器高度小于于内容高度。 ```CSS div { width: 300px; height:20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdd4b796297041efb02c18ab8219daf0~tplv-k3u1fbpfcp-watermark.image?) ## 后记截断文本的方式有很多，line-clamp胜在可以指定行数。