CSS文本溢出顯示省略號

時間 2019-11-22

標籤 css 文本溢出顯示省略號欄目 CSS 简体版

原文原文鏈接

項目中經常有這種須要咱們對溢出文本進行"..."顯示的操做，單行多行的狀況都有（具體幾行得看設計師心情了），這篇隨筆是我我的對這種狀況解決辦法的概括，歡迎各路英雄指教。javascript

單行

語法css

overflow:hidden; text-overflow:ellipsis; white-space:nowrap

示例html

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號java

多行

1.直接用css屬性設置(只有-webkit內核纔有做用)git

語法github

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

移動端瀏覽器絕大部分是WebKit內核的，因此該方法適用於移動端；web

-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。瀏覽器
display: -webkit-box 將對象做爲彈性伸縮盒子模型顯示。markdown
-webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式。ide
text-overflow: ellipsis 以用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本。

示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略

2.利用僞類

語法

<div id="con"> <span id="txt">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略</span> <span class="t"></span> </div> <style> #txt{ display: inline-block; height: 40px; width: 250px; line-height: 20px; overflow: hidden; font-size: 16px; } .t:after{ display: inline; content: "..."; font-size: 16px; } </style>

示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略

3.利用絕對定位和padding;(跨瀏覽器解決方案)
看到上例是否是以爲「哇，終於能夠跨瀏覽器使用了」，但你這樣想的時候有沒有考慮過IE的感覺？IE6/7是沒有僞類的，還不趕快跪下對IE叫聲「大哥」，雖然IE6已經退出市場，可是IE7仍是須要兼容的，因此呢，我本身又想到了如下的辦法，我這邊測試了下感受還行。

上代碼

<p id="con2">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略<span class="t2">...</span> </p> <style> #con2{ position: relative; height: 40px; width: 250px; line-height: 20px; overflow: hidden; padding-right: 12px; } .t2{ position: absolute; right: 0; bottom: 0; } </style>

這個方法的原理是：首先在包含文字的元素裏，嵌入一個<span>...</span>，而後包含文字的元素右側留出...的位置(padding-right),最後利用絕對定位將...定位至右側的padding-right區域
示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略...

4.其餘
利用js插件來實現該功能，這裏有倆款插件推薦，這篇主要介紹的是css方法，因此它們使用方法就不廢話了。

問題
感謝村長指出了第二種和第三種都沒有考慮到內容不足倆行的狀況，這種狀況下，個人上面說到的第二種和第三種方法，「...」依舊會存在，並不會隱藏。暫時尚未想出利用css來實現不到倆行隱藏的辦法，sorry。因此若是存在不到倆行的狀況儘可能仍是不要用了吧，可使用js。這個就先放在這兒，何時想到辦法再來修改

function mitulineHide(num,con){ var contain = document.getElementById(con); console.log(con); var maxSize = num; var txt = contain.innerHTML; if(txt.length>num){ console.log('1') txt = txt.substring(0,num-1)+"..." contain.innerHTML = txt; }else{ console.log("error") } };