toc

• 单行省略

• 多行省略

  • webkit弹性盒模型方案
  • after伪元素方案
  • after伪元素方案升级
  • opera浏览器方案
  • Clamp.js方案

Intro

对于多行文字经常会有控制行数的需求，特别是字数不可控的的标题，其中的难点是最后行末的省略号，加上省略号也让文本显得更为优雅，易读。

单行省略

.text-overflow { 
	overflow: hidden; 
	text-overflow:ellipsis; 
    white-space: nowrap;
    max-width: 100%; 
}

上述代码使用频率较高，浏览器的支持情况也良好。

多行省略

webkit弹性盒模型方案

.line-clampin { 
	overflow: hidden; 
    text-overflow:ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp:3; 
    -webkit-box-orient:vertical; 
}

webkit的浏览器支持多行省略号，这种方案的好处很明显比较优雅，代码量少，特别适用针对Android，iOS移动设备的网页。

当然需要注意的是此方法使用了弹性盒模型（flexbox），而且使用它的盒子中不能使用padding，倘若使用padding，会让其余行露出来。

after伪元素方案

此处的思路是在行末使用after伪元素的content属性或者backgroud属性创造出省略的样式。

p { 
	position:relative; 
    line-height:1.4em; 
    height:5.6em; /* 4 times the line-height to show 4 lines */ } 
p::after { 
	content:"..."; 
    font-weight:bold; 
    position:absolute; 
    bottom:0; 
    right:0; 
    padding:0 20px 1px 45px; 
    background:url(ellipsis_bg.png) repeat-y; 
    }

上述代码在content中用了省略号，还有个思路是content属性值为空，background属性中用CSS3渐变设置渐隐的样式。

这种方案的好处是浏览器支持比较广泛（不支持after的浏览器自然不支持），缺点就是不够优雅，after伪元素很可能会有盖住半个字的现象。

after伪元素方案升级

感谢@强-记的提醒：“after伪元素方案，如果不满3行不是有bug？”，稍微考虑了下，可以使用这样的方式来解决多行省略的问题。

p { 
	position:relative; 
    font-size:14px; 
    line-height:1.4em; 
    max-height:4.2em; /* 1.4 * 3 */ 
    overflow: hidden; 
} 
p::after { 
	content:"..."; 
    font-weight:bold; 
    position:absolute; 
    top:38px; /* 14 * 1.4 * 2 */ 
    right:0; 
    padding:0 20px 1px 45px; 
    background:#f8f8f8; 
}

Demo

解决的思路很简单，不固定p的高度，给一个最大高度，省略号的部分使用绝对定为的top来定为，这样不到3行的省略号自然被隐藏了。

至于after的浏览器支持问题，如果不介意自然也可以在内包裹标签来实现

opera浏览器方案

opera浏览器中也有与webkit类似的私有方案。

.last-line { 
	height: 3.6em; /* exactly three lines */ 
    text-overflow: -o-ellipsis-lastline; 
}

Clamp.js方案

最有就是Clamp.js，这种方案跨浏览器的方案，当然使用js，显得略重，这个需要权衡。

var module = document.getElementById("clamp-this-module"); $clamp(module, {clamp: 3});

最好用在p标签上。

在此还有Clamp.js的替代方案。

———

上述基本属于翻译下面的两篇文章。

• line-clampin
• How to (kinda) “mimic” -webkit-line-clamp in other browsers