现在来介绍一下我们今天的嘉宾：阿伦 · 特雷西 · 克里斯蒂亚诺 · …

省略号，在汉语中的基本形式是位于中线的六个小圆点（……），占两个字的位置；我国传统习惯在书面上用“上略”“下略”等表示省略，鲁迅1909年在《域外小说集·略例》中提出四种新式标点符号，其中“虚线”即省略号表示“语不尽”或“语中辍”，1930年《教育部划一教育机关公文格式办法》定名为“省略号”，沿用至今。16世纪英国的剧本出现省略号，表示话语被打断，或不完整。俄语语法著作1831年第一次提到省略号（…）大尉/船长。西方语文的省略号位于底线。英语句首或句中词语的省略用三个小圆点（…）表示 。

欧克，打完收工！

开个玩笑，作为一只专业的前端程序猿怎么可能会如此敷衍行事 。OK，今天我们就来探讨一下文本溢出显示省略号的问题 。

文本溢出显示省略号

单行自不多说

1
2
3
4

width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

我们来重点探讨一下多行文本溢出省略

Round 1

对于 Webkit 内核浏览器可以使用 WebKit 的 CSS 扩展属性 -webkit-line-clamp 。值得注意的是 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

该属性可以限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。

常见结合属性：

1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
3. text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

1
2
3
4
5
6

//用法
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;	
-webkit-line-clamp: 3;	//限制在一个块元素显示的文本行数最多2行
-webkit-box-orient: vertical;

效果如下：

但是，这毕竟是 Webkit 特有的属性，绕不开兼容性问题 。

所以 -webkit-line-clamp ，OUT！

Round 2

既然考虑到兼容性的写法，那我们能不能用 伪类 定位的方法模拟省略号呢？

1
2
3
4
5
6
7
8
9
10
11
12

p::after{
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 1.2em;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

这里用到了背景颜色过渡在结尾处由透明到白色来遮盖原来的文字，效果如下：

可以看到实际效果还可以，但是考虑到背景如果是带颜色的或者是图片就不太好处理了 。

SO 伪类，OUT！

Round 3

既然自己无法解决，那么看看别人是怎么处理的吧 。Clamp.js 是一个处理此问题的 JS 插件，在 GitHub 上有上千颗星，(¯﹃¯) Let’s Do It !

在一系列的完（chao）美（xi）操（wen）作（dang）后，终于实现了原先的需求 。其原理也十分简单易懂，先判断浏览器是否支持 webkitLineClamp 属性（ typeof(element.style.webkitLineClamp) ），支持就添加该属性用 css 控制，不支持就用递归的方式递减文本，然后判断其高度是否超过规定的最大高度 。但是值得注意的是，使用 Clamp.js 后不能定义该元素的 height，只能通过其原有方法（ $clamp(myParagraph, {clamp: '35px'}) ）限制元素高度，不然会影响其内部的判断从而导致个别浏览器报错 。

Mission Complete！

PS : 2017-11-29 补充

今天又发现了一个新的黑科技，简直亮瞎了我的眼睛 ——– 黑科技：CSS定制多行省略