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

优点

1.ellipsis支持

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

2.友好的向后兼容

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

.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: hidden、display: -webkit-box、-webkit-box-orient: vertical，如下：

.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浏览器对此属性在未来支持如何如何仍尚未可知。

.line-clamp {
    height: 3.6em;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
}

Javascript 兼容方案

1.简单实现方案：

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.建议的实现方案

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

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。

CSS属性：line-clamp

目录

优点

缺点及注意事项

Opera 独特兼容方案

Javascript 兼容方案

转载申请

煦涵