本文首發(fā)于政采云前端團(tuán)隊博客：可能是最全的 “文本溢出截斷省略” 方案合集
單行文本溢出省略
核心CSS語句
overflow:hidden;
/*設(shè)置文字在一行，不換行*/
white-space:nowrap;
/*文本溢出時，顯示省略符號來代表被修剪的文本*/
text-overflow:ellipsis;
-
優(yōu)點
- 無兼容性問題
- 響應(yīng)式截斷
- 文本溢出范圍才顯示省略符號，否則不顯示省略號
-
短板
- 只支持單行文本截斷
適應(yīng)場景
- 適用單行文本溢出省略號的情況
Demo
<style>
.demo{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<div class='demo'>這是一段很長很長的文本</div>
</body>
多行文本溢出省略
純CSS實現(xiàn)方案
/*限制在一個塊元素內(nèi)顯示的行數(shù)，2表示最多顯示2行，為了實現(xiàn)該效果，他需要組合其他的webkit屬性*/
-webkit-line-clamp:2;
/*和上面的結(jié)合使用，將對象作為彈性伸縮盒子模型顯示*/
display:-webkit-box;
/*設(shè)置或檢索伸縮盒子的子元素的排列方式*/
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis
- 優(yōu)點
- 響應(yīng)式截斷
- 文本溢出范圍才顯示省略號，否則不顯示省略號
- 省略號顯示位置剛好
- 短板
- 兼容性一般：
-webkit-line-clamp屬性只有webkit內(nèi)核的瀏覽器才支持
- 兼容性一般：
WX20200103-175632@2x.png
適用場景
- 多適用于移動端頁面 ，因為移動設(shè)備瀏覽器更多是基于
Webkit內(nèi)核
<style>
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
</style>
<body>
<div class='demo'>這是一段很長很長的文本</div>
</body>
基于Javascript的實現(xiàn)方案
-
優(yōu)點
- 無兼容性問題
- 響應(yīng)式截斷
- 文本溢出范圍才顯示省略號，否則不顯示省略號
-
短板
- 需要
JS實現(xiàn)，背離展示和行為相分離原則 - 文本為中英文混合時，省略號顯示位置略有偏差
- 需要
適用場景
- 適用于響應(yīng)式截斷，多行文本溢出省略的情況
Demo
當(dāng)前僅適用于文本為中文，若文本中有英文，可自行修改
<script type="text/javascript">
const text = '這是一段很長的文本';
const totalTextLen = text.length;
const formatStr = () => {
const ele = document.getElementsByClassName('demo')[0];
const lineNum = 2;
const baseWidth = window.getComputedStyle(ele).width;
const baseFontSize = window.getComputedStyle(ele).fontSize;
const lineWidth = +baseWidth.slice(0, -2);
// 所計算的strNum為元素內(nèi)部一行可容納的字?jǐn)?shù)(不區(qū)分中英文)
const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
let content = '';
// 多行可容納總字?jǐn)?shù)
const totalStrNum = Math.floor(strNum * lineNum);
const lastIndex = totalStrNum - totalTextLen;
if (totalTextLen > totalStrNum) {
content = text.slice(0, lastIndex - 3).concat('...');
} else {
content = text;
}
ele.innerHTML = content;
}
formatStr();
window.onresize = () => {
formatStr();
};
</script>
<body>
<div class='demo'></div>
</body>
多行文本溢出省略（按照高度）
-
多行文本溢出不顯示省略號
- 核心
CSS語句
- 核心
overflow:hidden;
line-height:20px;
max-height:40px;
-
優(yōu)點
- 無兼容性問題
- 響應(yīng)式截斷
-
短板
- 單純截斷文字，不展示省略號，觀感上較為生硬
使用場景
- 適用于文本溢出不需要省略號的情況
<style>
.demo {
overflow: hidden;
max-height: 40px;
line-height: 20px;
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>
偽元素 + 定位實現(xiàn)多行省略
-
核心
css語句- position: relative; （為偽元素絕對定位）
- overflow: hidden; （文本溢出限定的寬度就隱藏內(nèi)容）
- position: absolute;（給省略號絕對定位）
- line-height: 20px; （結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）
- height: 40px; （設(shè)定當(dāng)前元素高度）
- ::after {} （設(shè)置省略號樣式）
- 優(yōu)點
- 無兼容性問題
- 響應(yīng)式截斷
- 短板
- 無法識別文字的長短，無論文本是否溢出范圍，一直顯示省略號
- 省略號顯示可能不會剛剛好，有時會遮住一半文字
適用場景
- 適用于對省略號效果要求較低，文本一定會溢出元素的情況
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>
利用 Float 特性，純 CSS 實現(xiàn)多行省略
-
核心
CSS語句- ine-height: 20px；（結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）
- overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）
- float: right/left；（利用元素浮動的特性實現(xiàn)）
- position: relative；（根據(jù)自身位置移動省略號位置, 實現(xiàn)文本溢出顯示省略號效果）
- word-break: break-all；（使一個單詞能夠在換行時進(jìn)行拆分）
-
優(yōu)點
- 無兼容問題
- 響應(yīng)式截斷
- 文本溢出范圍才顯示省略號，否則不顯示省略號
-
短板
- 省略號顯示可能不會剛剛好，有時會遮住一半文字
適用場景
+ 適用于對省略效果要求較低，多行文本響應(yīng)式截斷的情況
<style>
.demo {
background: #099;
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo::before{
float: left;
content:'';
width: 20px;
height: 40px;
}
.demo .text {
float: right;
width: 100%;
margin-left: -20px;
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>
