在 HTML 中，有的位置为了美观设计了最大的行数。然而，由于设备差异和中英文字符的差异，截取字符串指定个数显然不是聪明的选择。这时候，css3 的新特性便可以大展神威了。

单行

1
2
3

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

通过设置禁止换行和超出显示省略号来实现单行文本的溢出控制。

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

此方法使用 webkit 的弹性伸缩盒模型实现了多行文本超出自动省略的功能。

前者基本上主流浏览器都支持

后者只在 webkit 浏览器上支持，可以在移动端使用。