單行、多行文本溢出顯示出省略號
阿新 • • 發佈：2019-05-03
innerhtml meta content pri 擴展 line shu ora 情況
1. 單行溢出，用text-overflow實現：
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;//文本不會換行
2. 多行文本溢出（因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端）。
display: -webkit-box;//必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 -webkit-box-orient: vertical;//必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 -webkit-line-clamp: 3; //限制在一個塊元素顯示的文本的行數，需要組合其他的WebKit屬性overflow: hidden;
<body>
<div class="figcaption">
溫完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題
結果為：
3. 采用：after來解決多行文本溢出。(瀏覽器兼容)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>-webkit-line-clamp限制塊元素顯示的文本的行數</title> <style type="text/css"> .ellipsis{ position:relative; line-height:1.4em; height:4.2em; overflow:hidden; width:300px; background-color: orange; } .ellipsis::after{ content:"..."; position:absolute; bottom:5px; right:0px; } </style> </head> <body> <div class="ellipsis"> 瀏覽器兼容偽類寫法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 </div> </body> </html>
1、將height設置為line-height的整數倍，防止超出的文字露出。
2、給texts::after添加漸變背景可避免文字只顯示一半。
3、由於ie6-7不顯示content內容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。
該方法適用範圍廣，但在文字未超出行的情況下，也會出現省略號。
4. 使用JS方法
(1)單行
<!doctype html> <html lang="en"> <head> </head> <body> <div id="ellipsis"> 瀏覽啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 </div> </body> <script type="text/javascript"> function mitulineHide(num,con){ var contain = document.getElementById(con); console.log(con); var maxSize = num; var txt = contain.innerHTML; if(txt.length>num){ txt = txt.substring(0,num-1)+"..."; contain.innerHTML = txt; } else{ contain.innerHTML = txt; } } mitulineHide(10,‘ellipsis‘); </script> </html>
(2) 多行
https://www.jianshu.com/p/d3a45126bb16
單行、多行文本溢出顯示出省略號