文字溢位

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