1.文字一行顯示：

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

image.gif

2.文字兩行顯示：

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

image.gif

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

常用結(jié)合屬性：

• display: -webkit-box; （必須結(jié)合屬性）用來將對象作為彈性伸縮盒子模型顯示
• -webkit-box-orient （必須結(jié)合屬性）用來設(shè)置或檢索伸縮盒對象的子元素的排序方式
• text-overflow （非必須）該屬性可以用來多行文本的情況下，用省略號隱藏超出范圍的文本