css超出隱藏顯示省略號怎么設置？

當我們在進行網頁前端開發的時候，一般獲取文章標題，然后一行一行的顯示。但是當標題過長的時候，就會造成換行顯示。還有顯示部分文本信息時，如果全部顯示就過於繁瑣，會帶來不會的網頁體驗感。雖然我們可以使用overflow:hidden將超過寬度的字符隱藏掉。但是結尾看起來總會讓人覺得有點僵硬。而且也不利於讓用戶知道后面還有沒顯示完的字符。最好的方法，就是將多余的字符用省略號來代替。

1. 單行文本超出顯示省略號🎯

div{
    /* 設置單行文本只需要三行代碼即可搞定 */
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  
}

 

解釋說明：

• white-space:nowrap： 設置文本不換行

• overflow:hidden： 超出文本隱藏

• text-overflow:ellipsis; 文本對象溢出顯示 ...

 2. 多行文本超出顯示省略號🎯

 注意：多行文本超出顯示省略號只有-webkit內核才有作用

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

 

解釋說明：

• display: -webkit-box 作為彈性伸縮盒子模型顯示

• -webkit-line-clamp 限制文本顯示行數,這是一個不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中

• -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式