首頁  >  文章  >  web前端  >  CSS實作單行、多行文字溢位顯示省略號的方法

CSS實作單行、多行文字溢位顯示省略號的方法

一个新手
一个新手原創
2017-09-19 09:28:371583瀏覽

程式碼實作:

<code class="hljs xml"></code><p><span style="color:#009a61">//单行</span></p><p>.single-line{</p><p>   width:200px;</p><p>   overflow:hidden;</p><p>   white-space:nowrap;  </p><p>   text-overflow:ellipsis;<br/></p><p>}</p><p><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"single-line"</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></p><p><span style="color:#009a61">//多行</span></p><p>.multiple-line{   </p><p>  width:200px;   </p><p>  display:-webkit-box;   </p><p>  -webkit-box-orient:vertical;   </p><p>  -webkit-line-clamp:2;   </p><p>  overflow:hidden;   </p><p>}<br/></p>

注意:由於使用的是WebKit的CSS擴充屬性,所以此方法只適用於WebKit瀏覽器及行動端;

以上是CSS實作單行、多行文字溢位顯示省略號的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn