單行、多行文本溢出顯示出省略號

時間 2020-07-27

標籤單行行文溢出顯示省略號简体版

原文原文鏈接

1. 單行溢出，用text-overflow實現：javascript

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;//文本不會換行

2. 多行文本溢出（因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端）。css

display: -webkit-box;//必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示  -webkit-box-orient: vertical;//必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 -webkit-line-clamp: 3; //限制在一個塊元素顯示的文本的行數，須要組合其餘的WebKit屬性 overflow: hidden;

<body>   
    <div class="figcaption"> 溫完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題完美解決多行文本溢出顯示省略號的問題 </div>
    <div class="figcaption"> From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death.From the golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be shared with all who would take heed. In more recent times, this truth has been expressed as: April showers bring May flowers. This is a truth that promises light bursting from darkness, strength born from weakness and, if one dares to believe, life emerging from death. </div>
    <div class="figcaption"> From 完美解決多行文本溢出顯示省略號的問題the 完美解決多行文本溢出顯示省略號的問題golden-tipped fields of mid-west America to the ancient kingdoms of verdant Palestine, there is a happy truth to be 完美解決多行文本溢出顯示省略號的問題shared with all who would take heed. In more recent times, this truth has been expressed as: April showers br完美解決多行文本溢出顯示省略號的問題ing May flowers. This is a truth that promises light bursting from darkness, strength born 完美解決多行文本溢出顯示省略號的問題 from weakness and, if one dares to believe, life emerging from death. </div>
</body>

結果爲：html

3. 採用：after來解決多行文本溢出。(瀏覽器兼容)java

<!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>

一、將height設置爲line-height的整數倍，防止超出的文字露出。web

二、給texts::after添加漸變背景可避免文字只顯示一半。express

三、因爲ie6-7不顯示content內容，因此要添加標籤兼容ie6-7（如：<span>…<span/>）；兼容ie8須要將::after替換成:after。promise

該方法適用範圍廣，但在文字未超出行的狀況下，也會出現省略號。瀏覽器

4. 使用JS方法app

(1)單行dom

<!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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。