css超出隱藏顯示省略號怎麼設定？

不知名前端李小白發表於2021-10-12
CSS

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 設定或檢索伸縮盒物件的子元素的排列方式

相關文章