您好,登錄后才能下訂單哦!
這篇文章主要介紹css怎么實(shí)現(xiàn)文本單行超出和多行超出省略號(hào),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
首先我們來看一看css實(shí)現(xiàn)單行文本超出省略號(hào)的方法。
css實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)應(yīng)該用text-overflow:ellipsis屬性來,當(dāng)然還需要加寬度width屬來兼容部分瀏覽。
css單行文本超出省略號(hào)的實(shí)現(xiàn)代碼:
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>省略號(hào) test</title> <style type="text/css"> *{ margin:0; padding:0; } body{ padding:10px; font-family:Arial; } #test { position:relative; width:150px; height:20px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap; overflow:hidden; border:1px solid #999; } #test span{ position:absolute; top:0; right:0; display:block; float:left; } </style> </head> <body> <div id="test">億速云億速云億速云億速云億速云億速云億速云</div> </body> </html>
text-overflow:ellipsis屬性只支持單行文本的溢出顯示省略號(hào),如果我們要實(shí)現(xiàn)多行文本溢出顯示省略號(hào)呢?下面我們就繼續(xù)說css實(shí)現(xiàn)多行文本超出省略號(hào)的方法。(text-overflow:ellipsis屬性更多內(nèi)容可參考css手冊)
1、css實(shí)現(xiàn)多行文本超出省略號(hào)之直接用css屬性設(shè)置(只有-webkit內(nèi)核才有作用)
語法:
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
移動(dòng)端瀏覽器絕大部分是WebKit內(nèi)核的,所以該方法適用于移動(dòng)端;
-webkit-line-clamp 用來限制在一個(gè)塊元素顯示的文本的行數(shù),這是一個(gè)不規(guī)范的屬性(unsupported WebKit property),它沒有出現(xiàn)在 CSS 規(guī)范草案中。
display: -webkit-box 將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow: ellipsis 以用來多行文本的情況下,用省略號(hào)“…”隱藏超出范圍的文本。
2、css實(shí)現(xiàn)多行文本超出省略號(hào)之利用絕對定位和padding;(跨瀏覽器解決方案)
語法:
p{ position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } p::after{ content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }
這個(gè)方法的原理是:首先在包含文字的元素里,嵌入一個(gè)<span>...</span>,然后包含文字的元素右側(cè)留出...的位置(padding-right),最后利用絕對定位將...定位至右側(cè)的padding-right區(qū)域。
說明:該方法適用范圍廣,但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào),可結(jié)合js優(yōu)化該方法。
注意:
將height設(shè)置為line-height的整數(shù)倍,防止超出的文字露出。
給p::after添加漸變背景可避免文字只顯示一半。
由于ie6-7不顯示content內(nèi)容,所以要添加標(biāo)簽兼容ie6-7(如:<span>…<span/>);兼容ie8需要將::after替換成:after。
以上是css怎么實(shí)現(xiàn)文本單行超出和多行超出省略號(hào)的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。