前端入坑纪 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 领红包，领到大红包的小伙伴赶紧使用哦！
支持你我，扫一扫红包
