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

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

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

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

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

text-overflow: ellipsis 詳細說明

• CSS3 text-overflow property
• text-overflow - CSS

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

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

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章