CSS 限制字數/行數,讓過長的文字隱藏變"…" | CSS to make text overflow elegant is with ellipses, single or multiple lines

text_ellipses_title

設計網頁版面的時候常常需要節省版面空間,所以把一些文字設計成只顯示幾個字,最後再加上省略記號(三個點)"…"。

其實這個功能不需要用到很複雜的程式碼,只需要用一行css就可以囉~

 

這一篇要介紹的是text-overflow: ellipsis; 屬性。

先製作一個文字框:

HTML

CSS

這時候會得到的結果是:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-17-12-01-05

接下來只要再加入一段css就可以

這時候就會看到文字省略的結果:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-17-12-01-22

 

上面的css有用到white-space: nowrap;的屬性,這個屬性是針對單一行文字的時候使用才會有效果的,如果是想要讓文字顯示多行(multiple lines)再省略的話,要再加上一段css

這時候就會得到多行的結果:

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-17-12-27-01

 

下面再貼一次完整的html+css程式碼:

HTML

CSS

 

Leave a Reply