1.文字一行顯示：

div {
    width: 150px; 
    overflow: hidden;
    text-overflow: ellipsis;   /* 文字超出部分省略號顯示 */
    white-space: nowrap;   /* 不換行 */
}

2.文字兩行顯示：

div {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
 

此處用到 webkit 的私有屬性：-webkit-line-clamp  用來限制在一個塊元素顯示的文字的行數。

常用結合屬性：

• display: -webkit-box;     （必須結合屬性）用來將物件作為彈性伸縮盒子模型顯示
• -webkit-box-orient         （必須結合屬性）用來設定或檢索伸縮盒物件的子元素的排序方式
• text-overflow                 （非必須）該屬性可以用來多行文字的情況下，用省略號隱藏超出範圍的文字