css3文本溢出顯示控制

1.單行文本溢出顯示省略號(…)

       設置元素爲塊級元素display:block,設置元素寬度width,設置overflow：hidden,設置文本溢出顯示狀態text-overflow:ellipsis; white-space是否在容器邊界換行，nowrap不換行。

{
    display:block;
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;  
    -webkit-text-overflow:ellipsis;  
    -moz-text-overflow:ellipsis; 
     white-space:nowrap;
 }

2.多行文本溢出最後一行顯示省略號(…)

在webki瀏覽器或移動端（絕大部分是webkit內核的瀏覽器）頁面能夠直接使用webkit的css擴展屬性（webkit是私有屬性）-webkit-line-clamp。

-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數。

常見結合屬性：

display:-webkit-box; 必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示。

-webkit-box-orient 必須結合的屬性，設置或減小伸縮盒對象的子元素的排列方式。

text-overflow：ellipsis; 能夠用來多行文本的狀況下，用省略號「 ... 」隱藏超出範圍的文本。

{
    width:200px;  
    word-break:break-all;  
    display:-webkit-box;  
    -webkit-line-clamp:3;  
    -webkit-box-orient:vertical;  
    overflow:hidden;
}

3.跨瀏覽器兼容方案

{
    width:200px;
    height:60px;
    line-height:20px;
    position:relative;
    overflow:hidden;
    &:after{
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 5px;
        background: #ffffff;
    }
}

注意：以上寫法是less的語法。