為了確保頁面的整齊美觀,在很多的時候,我們常常需要隱藏超出長度的文字。這在清單條目,題目,名稱等地方常用到。
(1).文字超出一行,省略超出部分,顯示'...'
如果這種情況比較多,可以取一個切合作用的類別名稱用於復用。
.line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行,这样超出一行的部分被截取,显示... } <p class="item"> <p class="line-limit-length">最新消息:神秘地球黑洞深不可测,不停吸入周围海水。</p> <i class="icon icon-arrow-go"></i> //图标字体 </p>
(2). 可以給定容器寬度限制,超出部分省略
.product-buyer-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <h5 class="product-buyer-name">橘子橘子</h5>
以上是CSS限制顯示字數超出部分以省略號表示的詳細內容。更多資訊請關注PHP中文網其他相關文章!