前端入坑紀 60
今天來分享下在網頁制作過程中，經常碰到對部分過長文字進行截斷并添加省略號的效果
好，詳解如下！
OK，first things first！ 點我查看實際效果
未限制總寬度，請在小寬度下服用^_^
HTML 結構
<h3>單行省略...</h3>
<p class="prg">局座是局長的意思，"x座"國民黨中的叫法，如軍長叫軍座、師長叫師座、局長叫局座等等。現常指“戰略忽悠局”局長張召忠。</p>
<h3>多行省略1...</h3>
<p class="prg1">局座是局長的意思，"x座"國民黨中的叫法，如軍長叫軍座、師長叫師座、局長叫局座等等。現常指“戰略忽悠局”局長張召忠。</p>
<h3>多行省略2...</h3>
<p class="prg2">局座是局長的意思，"x座"國民黨中的叫法，如軍長叫軍座、師長叫師座、局長叫局座等等。現常指“戰略忽悠局”局長張召忠。</p>
<h3>多行省略3...</h3>
<p class="prg3 shortPgf">局座是局長的意思，"x座"國民黨中的叫法，如軍長叫軍座、師長叫師座、局長叫局座等等。現常指“戰略忽悠局”局長張召忠。</p>
四個段落，用來實驗效果，必不可少
CSS 結構
p {
width: 83%;
margin: auto;
}
.prg {
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prg1 {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
height: 60px;
line-height: 20px;
}
.prg1::after {
content: "...";
padding-left: 3px;
position: absolute;
bottom: 1px;
right: 0;
display: block;
height: 20px;
width: 5%;
background: linear-gradient(to right, rgba(255, 255, 255, .9) 0%, #fff 26%)
}
.prg2 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
}
1 .prg的單行省略，最常用。
2 .prg1的多行省略，使用了一個帶漸變背景的絕對定位偽元素。局限性大，因為最后的文字位置不好確定在哪里，自然的，這個偽元素定位不好寫。
3 .prg2的多行省略，則是采取了css里一些實驗性的屬性，還是webkit內核的才行，局限也可想而知。
4 .prg3的省略號，是目前比較合理的。javascript的方式，靈活簡便，唯獨增加了些許js的代碼量。畢竟不是使用的css屬性。
JavaScript 結構
// 立即執行函數，將shortLine函數掛到window上，這樣就可以直接調用了
(function (w) {
var shortLine = function (pragrafsClass, number) {
// 獲取需要展現省略號的那些段落的class元素
var prgs = document.getElementsByClassName(pragrafsClass);
// 遍歷它們，截取相應個數的長度，然后再填充回去，最后加上...
for (var i = 0; i < prgs.length; i++) {
var conts = prgs[i].textContent;
if (conts.length >= number) {
var sts = conts.slice(0, number)
prgs[i].textContent = sts + "..."
}
}
}
w.mj.shortLine = shortLine
})(window)
// OK，直接調用
mj.shortLine('shortPgf',51)
在web前端越發“工程化”的當下，類似的一些小效果，可以自己“打包”起來。然后放在自己的專有的空間里，如上面的mj。這樣用起來會很方便！
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
打開支付寶首頁搜 625097528 領紅包，領到大紅包的小伙伴趕緊使用哦！
支持你我，掃一掃紅包
