一、背景介绍
在进行前端开发的时候，我们经常会有一个需求就是对于过长的文本进行省略显示，而文本省略主要分为单行文本省略以及多行文本省略。本篇博客主要是介绍单行文本省略实现方式以及多行文本省略的三种实现方式并分析其优劣点。
二、单行文本省略
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.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 优劣点
优点：不存在兼容性问题，同时无论文本的长度为多少，都能够动态决定是否展示“...”。
缺点：存在一定的性能问题，因为需要遍历文本内容。
