CSS（一）：文本溢出显示省略号

发表于   |   分类于   |     |   阅读次数   |  

这是在网易技术二面的时候面试官问到的一个问题，当时没有答出来，今天在这里作一次解决该问题方法的总结。

单行文本溢出

可以使用 text-overflow: ellipsis 属性来实现单行文本溢出显示省略号，当然还需要加宽度 width 属性来兼容部分浏览器。

1
2
3
4
5
6
.single-text {
    width: 490px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  1. overflow: hidden; 溢出元素内容区的内容不可见的。
  2. white-space: nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到
    标签为止。用以保证为单行文本
  3. text-overflow: ellipsis; 使用显示省略符号来代表溢出的文本。

效果如图：

多行文本溢出

方法（一）

1
2
3
4
5
6
7
.multi-text {
    width: 500px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
  1. -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的 WebKit 属性。
  2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。
  3. -webkit-box-orient; 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。

效果如图：

适用范围：
由于使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端，其中移动端大部分是 WebKit 内核的浏览器。

方法（二）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.multi-text-complete {
    width: 500px;
    position: relative;
    line-height: 20px;
    max-height: 60px;   /*将 height设为 line-height 的整数倍，防止超出的文字露出*/
    overflow: hidden;
}
.multi-text-complete:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}
  1. 将 height 设置为 line-height 的整数倍，防止超出的文字露出。
  2. 给 p::after 添加渐变背景可避免文字只显示一半。
  3. 由于 ie6-7 不显示 content 内容，所以要添加标签兼容 ie6-7（如：…）；兼容ie8需要将 ::after 替换成 :after。

效果如图：

适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号，可结合js优化该方法。

源代码和运行效果

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本溢出显示省略号</title>
    <style>
        .single-text {
            width: 490px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .multi-text {
            width: 500px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
        .multi-text-complete {
            width: 500px;
            position: relative;
            line-height: 20px;
            max-height: 60px;
            overflow: hidden;
        }
        .multi-text-complete:after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 40px;
            background: -webkit-linear-gradient(left, transparent, #fff 55%);
            background: -o-linear-gradient(right, transparent, #fff 55%);
            background: -moz-linear-gradient(right, transparent, #fff 55%);
            background: linear-gradient(to right, transparent, #fff 55%);
        }
    </style>
</head>
<body>
<div>
    <p class="single-text">
        CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号
    </p>
    <p class="multi-text">
        CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号
    </p>
    <p class="multi-text-complete">
        CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号CSS实现单行文本溢出显示省略号
    </p>
</div>
</body>
</html>

效果如图：

坚持原创技术分享，您的支持将鼓励我继续创作！

热评文章