設計網頁版面的時候常常需要節省版面空間,所以把一些文字設計成只顯示幾個字,最後再加上省略記號(三個點)”…”。
其實這個功能不需要用到很複雜的程式碼,只需要用一行css就可以囉~
這一篇要介紹的是text-overflow: ellipsis; 屬性。
先製作一個文字框:
HTML
<div class="box"> <p class="ellipsis">無所不架JA.anything是設計相關小型工作室,製作項目包含網頁設計、app製作、網路遊戲、影音特效剪輯等。</p> </div>
CSS
.box { width: 300px; padding: 10px; border: #4caf50 2px solid; }
.ellipsis { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
這時候就會看到文字省略的結果:
上面的css有用到white-space: nowrap;的屬性,這個屬性是針對單一行文字的時候使用才會有效果的,如果是想要讓文字顯示多行(multiple lines)再省略的話,要再加上一段css
.ellipsis { display: -webkit-box; -webkit-line-clamp: 2; //行數 -webkit-box-orient: vertical; white-space: normal; }
這時候就會得到多行的結果:
下面再貼一次完整的html+css程式碼:
HTML
<div class="box"> <p class="ellipsis">無所不架JA.anything是設計相關小型工作室,製作項目包含網頁設計、app製作、網路遊戲、影音特效剪輯等。</p> </div>
CSS
.box { width: 300px; padding: 10px; border: #4caf50 2px solid; } .ellipsis { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }