文字溢出

text-overflow 属性处理如何向用户发出溢出内容的信号。在此示例中，ellipsis 表示剪切的文本。

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

不幸的是，text-overflow: ellipsis 仅适用于单行文本。在标准 CSS 的最后一行没有办法支持省略号，但可以通过非标准的 webkit 实现 flexbox 来实现。

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

示例（在 Chrome 或 Safari 中打开）：

http://jsfiddle.net/csYjC/1131/

资源：

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0