深入擴(kuò)展文本溢出解決方案
在實(shí)際的開(kāi)發(fā)中不管是移動(dòng)端還是 PC 端都會(huì)遇到文本太長(zhǎng)，因?yàn)閷挾炔粔驅(qū)е挛覀冃枰O(shè)置成省略號(hào)。文本就文本溢出做一個(gè)總結(jié)，希望對(duì)你們開(kāi)發(fā)過(guò)程中有幫助。
閱讀本文你將看到如下幾部分內(nèi)容:
單行文本溢出 多行文本溢出 拓展的多行文本溢出 自定義多行文本溢出 高亮多行文本溢出
單行文本溢出
一行文本超出顯示是一個(gè)最基本的超出最大寬度，顯示省略號(hào)[1]，效果如圖所示
這個(gè)效果通過(guò) css 就可以實(shí)現(xiàn)，代碼如下：
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:2px solid greenyellow;
兼容性一片綠呀，基本上所有的瀏覽器都支持
多行文本溢出
這個(gè)效果也可以通過(guò) css 來(lái)實(shí)現(xiàn)
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
border: 2px solid greenyellow;
如果將 display: -webkit-box 和 text-overflow: ellipsis 配合使用，文本將以省略號(hào)結(jié)尾。
line-clamp 設(shè)置文本顯示的行數(shù)
box-orient 設(shè)置元素的排列方式
但是如果我們輸入的內(nèi)容是英文，如下圖所示：
我們會(huì)發(fā)現(xiàn)英文沒(méi)有如我所愿，顯示 3 行。因?yàn)橛⑽氖遣粫?huì)自動(dòng)換行的，所以我們需要設(shè)置換行
word-wrap: break-word; //允許長(zhǎng)單詞換行到下一行
word-break: break-all; //允許在單詞內(nèi)換行
效果如下
兼容性:該方法不適用于 IE 瀏覽器。
改變思路采用定位+偽類方法
div {
position: relative;
line-height: 20px;
max-height: 60px;
overflow: hidden;
word-break: break-all;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
使用 line-height 和 max-height 來(lái)限制顯示的行數(shù)，word-break 是設(shè)置英文單詞允許單詞內(nèi)換行; 在::after 中使用 background: linear-gradient 而不直接使用 background 可以避免文字顯示不全的問(wèn)題; ::after 在 ie8 不支持可以采用:after,如果在 ie6，7 時(shí),::after 可以換成真實(shí)元素來(lái)替換如
效果如下：
兼容性
也可以使用封裝好的庫(kù)clamp-js-main[2]
npm i clamp-js-main
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>