您好,登錄后才能下訂單哦!
這篇文章主要介紹css如何設(shè)置多行超出顯示省略號,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
設(shè)置方法:1、用“overflow:hidden;”把超出的部分隱藏起來;2、用“-webkit-line-clamp:行數(shù);”限制顯示文本的行數(shù);3、用“text-overflow:ellipsis;”顯示省略號來代表被隱藏的超出部分。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置多行超出省略號
實現(xiàn)思想:
1、使用“overflow:hidden;”語句不顯示超過對象尺寸的內(nèi)容,就是把超出的部分隱藏了;
2、使用“-webkit-line-clamp: 行數(shù);”語句限制顯示文本的行數(shù)
3、使用“text-overflow:ellipsis;”語句用省略號“…”隱藏超出范圍的文本
實現(xiàn)代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{margin: 0px;padding: 0px;} .box{ width: 280px; height: 62px; margin: 50px auto; border: 1px solid red; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } </style> </head> <body> <div class="box"> css多行文本超出長度顯示省略號,css多行文本超出長度顯示省略號, css多行文本超出長度顯示省略號,css多行文本超出長度顯示省略號 </div> </body> </html>
效果圖:
說明:移動端瀏覽器絕大部分是WebKit內(nèi)核的,所以該方法適用于移動端;
-webkit-line-clamp
用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性(unsupported WebKit property),它沒有出現(xiàn)在 CSS 規(guī)范草案中;
display: -webkit-box
將對象作為彈性伸縮盒子模型顯示 ;
-webkit-box-orient
設(shè)置或檢索伸縮盒對象的子元素的排列方式 ;
以上是“css如何設(shè)置多行超出顯示省略號”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。