学透CSS- line-clamp 限制你的内容行数（...）

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

最近在浏览掘金的时候，在首页看到了发现了这样一个有趣的现象：

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

line-clamp

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才会生效。

语法

.元素 { line-clamp: [none | <integer>]; }

设置截断内容前的最大行数，然后在最后一行的末尾显示省略号 (...)

目前在使用的时候必须是 -webkit-line-clamp 这个是因为line-clamp是CSS3提出的，目前的兼容性不好。虽然caniuse上很好！ Chrome实测：

举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>
        大家仔细看有啥不同，~~一个是广告，一个是文章~~。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。
        当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。    </div>
  </body>
</html>

这里的省略号应呈现为 Unicode 字符 (U+2026)

不要滥用height

当容器高度大于内容高度，其他内容也会显示出来，当然省略号仍然在

   div {
        width: 300px;
        height:300px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

当容器高度小于于内容高度。

  div {
        width: 300px;
        height:20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

后记

截断文本的方式有很多，line-clamp胜在可以指定行数。