语言►CSS

如何用CSS实现多行尾省略号

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/06/%E5%A6%82%E4%BD%95%E7%94%A8CSS%E5%AE%9E%E7%8E%B0%E5%A4%9A%E8%A1%8C%E5%B0%BE%E7%9C%81%E7%95%A5%E5%8F%B7/

摘要

本文主要讲述了：

  1. 示例
  2. 原理
  3. 局限性和优雅降级

正文

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="example">
      hello, world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello,
      world!hello, world!hello, world!hello, world!hello, world!hello, world!
    </div>
    <style>
      .example {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /*显示的行数*/
        overflow: hidden;
      }
    </style>
  </body>
</html>

原理

-webkit-line-clamp属性可以限定块元素内容区的高度为指定行数

但-webkit-line-clamp无法独立生效，须配合其他 CSS 属性一起使用

  1. display属性值为-webkit-box或-webkit-inline-box
  2. -webkit-box-orient属性值为vertical
  3. overflow属性值为hidden

局限性和优雅降级

IE 不支持-webkit-line-clamp。

此时可以通过设置line-height和height实现优雅降级。

1
2
3
4
5
6
7
8
.example {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*显示的行数*/
  overflow: hidden;
  height: 63px; /*3行的总高度为63px*/
  line-height: 21px; /*1行的行高为21px*/
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/06/%E5%A6%82%E4%BD%95%E7%94%A8CSS%E5%AE%9E%E7%8E%B0%E5%A4%9A%E8%A1%8C%E5%B0%BE%E7%9C%81%E7%95%A5%E5%8F%B7/

本文对你有帮助？请支持我

支付宝
微信