這篇文章給大家分享的是有關css實現(xiàn)文本多行省略號的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設、網(wǎng)站設計、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務溆浦,10年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792
css實現(xiàn)文本多行省略號的方法:1、使用【text-overflow:ellipsis】屬性實現(xiàn)單行文本省略;2、使用屬性【webkit-box-orient: vertical】實現(xiàn)多行文本省略。
css實現(xiàn)文本多行省略號的方法:
如果實現(xiàn)單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis
屬性來,當然還需要加寬度width
屬來兼容部分瀏覽。
實現(xiàn)單行文本省略
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { margin:0 auto ; width:300px; color: red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div>單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略</div> </body> </html>
結果
實現(xiàn)多行文本省略
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { margin: 0 auto; width: 300px; color: red; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } </style> </head> <body> <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div> </body> </html>
結果
容,更多請關注創(chuàng)新互聯(lián)其它相關文章!
感謝各位的閱讀!關于“css實現(xiàn)文本多行省略號的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
新聞標題:css實現(xiàn)文本多行省略號的方法
文章轉(zhuǎn)載:http://www.ekvhdxd.cn/article24/peosce.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、定制網(wǎng)站、網(wǎng)頁設計公司、、企業(yè)建站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)