CSS 技巧篇(九)：單行/多行文本顯示省略號

1、背景介紹

在進行前端開發的時候，咱們常常會有一個需求就是對於過長的文本進行省略顯示，而文本省略主要分爲單行文本省略以及多行文本省略。本篇博客主要是介紹單行文本省略實現方式以及多行文本省略的三種實現方式並分析其優劣點。

2、單行文本省略

2.1 code

<div class='demo0'>
    <p>單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試單行文本測試</p>	
</div>

div {
    width:300px;
    height:100px;
    border:1px solid #000;
}
.demo0 p {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
複製代碼

2.2 屬性解析

white-space: nowrap
做用是讓文本不換行，這是overflow:hidden和text-overflow：ellipsis生效的基礎！沒有它overflow:hidden和text-overflow：ellipsis沒法生效！

overflow: hidden
配合text-overflow: ellipsis;white-space: nowrap;實現p元素隱藏自身的溢出並設置（...）的效果

text-overflow: ellipsis
這一屬性依賴於overflow: hidden存在，只有設置了overflow:hidden它纔是可以生效的，你能夠把它看做overflow對於文本溢出隱藏的一種‘特殊樣式’

3、多行文本省略

3.1 多行文本省略-方案一

3.1.1 code

<div class='demo1'>
    <p>文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試</p>	
</div>

div {
    width:300px;
    height:100px;
    border:1px solid #000;
}
.demo1 p {	
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
複製代碼

3.1.2 屬性分析

display: -webkit-box
將對象做爲彈性伸縮盒子模型顯示

-webkit-box-orient: vertical
設置或檢索伸縮盒對象的子元素的排列方式

-webkit-line-clamp: 2
用來限制在一個塊元素顯示的文本的行數

3.1.3 優劣點

優勢：十分的簡便，只須要添加短短几行CSS樣式就可以實現多行文本的省略，實現方式簡單。

缺點：使用的是webkit的CSS屬性擴展，因此兼容瀏覽器範圍是PC端的webkit內核的瀏覽器以及移動端

3.2 多行文本省略-方案二

3.2.1 code

<div class='demo2'>
    <p>文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試</p>	
</div>

div {
    width:300px;
    height:100px;
    border:1px solid #000;
}
.demo2 p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
.demo2 p:after{
	content:"...";
	font-weight:bold;
	position:absolute;
	bottom:0;
	right:0;
	padding:0 10px 1px 0px;
	background-color:#fff;
}
複製代碼

3.2.2 實現分析

在文本內建立一個「...」,絕對定位在文本的末尾，同時設其背景顏色爲白色

3.2.3 優劣點

優勢：不存在兼容性問題。

缺點：在文本沒有達到溢出父級元素時也一樣顯示省略號；末尾處的文本可能存在被裁剪的副效果。

3.3 多行文本省略-方案三

3.3.1 code

<div class='demo3'>
    <p></p>
</div>

div {
    width:300px;
    height:100px;
    border:1px solid #000;
}
.demo3 p{
	height:100px;
	overflow:auto;
}

let s = '文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試'
let el = document.querySelector('.demo3 p')
let n = el.offsetHeight;
for(let i=0; i<=s.length; i++) {
    el.innerHTML = s.substring(0, i);
    if(n < el.scrollHeight) {
        el.style.overflow = 'hidden';
        el.innerHTML = s.substr(0, i-3) + '...';
        break;
    }
}
複製代碼

3.3.2 實現分析

經過遍歷文本內容，一個個字符的添加，當達到可顯示最大值以後，回退3個字符，替換爲「...」而後退出循環。

3.3.3 優劣點

優勢：不存在兼容性問題，同時不管文本的長度爲多少，都可以動態決定是否展現「...」。

缺點：存在必定的性能問題，由於須要遍歷文本內容。

4、總體案例code

See the Pen 單行/多行文本顯示省略號(...) by madman0621 (@madman0621) on CodePen.

5、參考連接

單行/多行文本溢出的省略(...)
多行文本溢出顯示省略號(...)