使用 CSS 將過長的文字轉成 ...

以往要截字,然後在後面加上 "...",PHP 可以使用 mb_strimwidth() ,詳見此篇:PHP 截字、斷字專用 function

不依靠 JavaScript、PHP,純粹想要在 CSS 達成,要怎麼做呢?

使用 CSS 將過長的文字轉成 ...

想要使用 CSS 讓過長的文字變成 "...",只要將超過的文字先隱藏,再來使用 text-overflow: ellipsis; 就可以達成。

text-overflow: ellipsis 詳細說明

使用 CSS 讓過長的文字變成 "..." 的 範例寫法

.desc {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

關於「Tsung」

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
分類: Programming,標籤: , , 。這篇內容的永久連結

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料