目录

  1. 优点
  2. 缺点及注意事项
  3. Opera 独特兼容方案
  4. Javascript 兼容方案

在日常前端开发需求中经常会有限制文本行数的需求,尤其在列表、图文混排等需求中,当需求是单行文本溢出时,我们可以选择使用 text-overflow 属性,当有多行文本需求时,我们可能首先想到使用 javascript 来处理,本文将和大家一起来认识一个新的 CSS 属性 line-clamp,这个属性现在是非标准属性,旨在解决多行文本截断问题,使用该属性时,有很多需要注意的地方,下面将一一道来。

优点

1.ellipsis支持

这个功能在我们处理多行文本时,是的确有益的,我们可以根据我们的需求来设置任意的行数,来适应我们的需求,并显示省略号溢出提示。

2.友好的向后兼容

我们可以使用 CSS 条件判断 @support(line-clamp: number) {} 来做向后兼容处理,比如如下代码:

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
.line-clamp {
position: relative;
width: 100px;
height: 3.6em;
overflow: hidden;
line-height: 1.2em;
border: 1px solid #ccc;
border-radius: 3px;
}
.line-clamp:after {
position: absolute;
bottom: 0;
right: 0;
content: "...";
height: 1.2em;
line-height: 1.2em;
padding: 0 3px;
text-align: right;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
@supports(-webkit-line-clamp: 3) {
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.line-clamp:after {
display: none;
}
}

缺点及注意事项

1.浏览器支持

IE、Microsoft Edge、Firefox、Opera Mini 不支持 -webkit-line-clamp ,Webkit 内核的浏览器需要使用 -webkit 前缀。详细请参考CanIUse:line-clamp: http://caniuse.com/#search=line-clamp

2.属性依赖

需要依赖 overflow: hiddendisplay: -webkit-box-webkit-box-orient: vertical,如下:

1
2
3
4
5
6
.line-clamp {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

3.不支持 direction

当设置文本方向为 direction: rtl 时不起作用,-webkit-line-clamp 会被忽略。

4.奇怪的断点处理

-webkit-line-clamp 文本断行情况,并不是和之前[煦涵说CSS:文本断行]一文中的 软性断行机会点 情况一致, 它常常在某个词的中间断行,比如 “I am a fashion man” 经过设置 line-clamp 后,情况可能是 “I am a fash…”,这样的坏处时,可能会引起文本的歧义,特别是在文章标题等重要内容处理需求时。

5.省略号不可用其他字符替代

该属性不像 text-overflow 在 Firefox 浏览器中可以使用特殊字符替换(当然现在标准还么有支持,支持情况也不容乐观)。

6.无空格文本不支持

当我们在一段文本中无空格时,使用 -webkit-line-clamp 不会生效。

7.不同语言 ellipsis 语义不同

在不同语言中 ellipsis 对应的语义不同,比如波兰语中,省略号表示语音的中断或者暂停,而在CJK语言中,省略号表示语句没有说完,更常见的是省略号应该是文本行垂直居中的,但是现在 line-clamp 属性是不支持的。更多不同请参考Wikit Ellipsis: https://en.wikipedia.org/wiki/Ellipsis

Opera 独特兼容方案

Opera浏览器对此属性在未来支持如何如何仍尚未可知。

1
2
3
4
5
.line-clamp {
height: 3.6em;
overflow: hidden;
text-overflow: -o-ellipsis-lastline;
}

Javascript 兼容方案

1.简单实现方案:

1
2
3
4
5
6
7
const clamps = document.querySelectorAll('.line-clamp');
[].forEach.call(clamps, (item, index) => {
let clientH = item.clientHeight;
while (item.scrollHeight > clientH) {
item.textContent = item.textContent.replace(/\W*\s\S*$/, '...');
}
})

2.建议的实现方案

简单的实现方案,不建议采用,如果需要使用在生产环境中,建议使用以上两个方案,其基本实现思路根据行高、行数、容器高度进行判断,进行截断处理。