在制作页面的过程中，常常会遇到多行文本在盒子中显示不全，需要隐藏溢出的文本并在其后显示省略号(…)的情况，如下图：

 

　　单行文本溢出及省略

 

　　众所周知，在CSS3中单行文本省略一般使用text-overflow实现：

 

　　text-overflow:ellipsis;

 

　　此属性仅当文本溢出时是显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义以下属性：

 

　　容器宽度: width：value;

 

　　强制文本在一行内显示: white-space：nowrap;

 

　　溢出内容为隐藏： overflow：hidden;

 

　　溢出文本显示省略号： text-overflow：ellipsis;

 

　　可惜这个属性只支持单行文本溢出显示省略号，并不支持多行文本。

 

　　多行文本溢出省略的几种方法

 

　　对于WebKit内核的浏览器，特别是移动端

 

　　WebKit的一个CSS扩展属性可以限制在一个块元素中显示的文本的行数，它是一个不规范的属性（unsupported WebKit property），没有出现在CSS规范草案中。

 

　　-webkit-line-clamp:value;

 

　　该属性实现溢出省略效果还需要结合其他的属性：

 

　　display: -webkit-box;

 

　　必须结合的属性，将对象作为弹性伸缩盒子模型显示

 

　　-webkit-box-orient:vertical;

 

　　必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

 

　　此时便可以结合

 

　　text-overflow:ellipsis;

 

　　实现多行文本省略。

 

　　兼容写法

 

　　把包含省略号的元素的定位在最后一行上，也能实现一个多行文本省略，没有花里胡哨的东西，只要调得准，基本可以兼容大部分浏览器，说的就是IE。（doge）

 

　　div p{

 

　　font-size:20px;

 

　　font-weight: 900;

 

　　color: crimson;

 

　　position:relative;

 

　　line-height:20px;

 

　　height:60px;

 

　　overflow:hidden;

 

　　}

 

　　div p::after {

 

　　width: 20px;

 

　　content:"...";

 

　　font-weight:bold;

 

　　position:absolute;

 

　　bottom:0;

 

　　right:-4px;

 

　　background:antiquewhite;

 

　　}

 

　　JS工具

 

　　Clamps.js能够在HTML元素内容过长时在后面添加省略标志，偷鸡小帮手，IE也能用。

 

　　https://github.com/josephschmitt/Clamp.jsClamp.js下载地址

 

　　使用script标签引用，需要使用p标签。

 

　　<script src="js/clamp.js"></script>