关于CSS中text-overflow的使用问题

关于CSS中text-overflow的使用问题

• text-overflow属性有三种值：

值	描述
clip	单纯裁剪文本，与overflow：hidden效果一致
ellipsis	以“…”来代表被裁剪的文本
string	使用给定的字符串来代表被修剪的文本（只在Firefox 浏览器有效）

但需要注意的是，text-overflow若想达到预期的在溢出部分添加“…”省略，则必须与“white-space:nowrap”（将文本强制放于同一行）和“overflow:hidden”（溢出省略）一起使用。

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

这个属性在用于标题等一行显示的文本时非常好用，但若我们希望在多行文本中使用，它将不起作用。因此产生了一个新的问题：

如何在多行文本中达到text-overflow：ellipsis的效果

在查阅了一些资料得知，可以使用 -webkit-line-clamp 属性来达到预期效果。

首先需要声明的是，这个属性是一个不规范属性，它没有出现在 CSS 规范草案中，目前只有Safari、Chrome、Opera支持。

-webkit-line-clamp属性是用于限制一个块级元素所能显示的行数的，因此，这个属性只能用于块级元素中，若想实现行内元素的文本截取，可以通过js的 substring(start,end) + “…” 去实现。

再回到-webkit-line-clamp属性，它的值为数字，即你希望显示的行数。但若想令这个属性生效，还必须捆绑两个属性：display: -webkit-box（将对象作为弹性伸缩盒子模型显示）和-webkit-box-orient（设置盒子对象或其子元素的排列方式 值可为vertical或 horizontal）

	color: #333;
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

效果如下：