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

text_ellipses_title

設計網頁版面的時候常常需要節省版面空間,所以把一些文字設計成只顯示幾個字,最後再加上省略記號(三個點)”…”。
其實這個功能不需要用到很複雜的程式碼,只需要用一行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;
}

這時候會得到的結果是:
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-17-12-01-05
接下來只要再加入一段css就可以

.ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

這時候就會看到文字省略的結果:
%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

.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2; //行數
-webkit-box-orient: vertical;
white-space: normal;
}

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

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2018-01-17-12-27-01
 
下面再貼一次完整的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;
}

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *