CSS 技巧篇(九)：单行/多行文本显示省略号

1、背景介绍

在进行前端开发的时候，咱们常常会有一个需求就是对于过长的文本进行省略显示，而文本省略主要分为单行文本省略以及多行文本省略。本篇博客主要是介绍单行文本省略实现方式以及多行文本省略的三种实现方式并分析其优劣点。

2、单行文本省略

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、多行文本省略

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 优劣点

优势：不存在兼容性问题，同时不管文本的长度为多少，都可以动态决定是否展现“...”。

缺点：存在必定的性能问题，由于须要遍历文本内容。

4、总体案例code

See the Pen 单行/多行文本显示省略号(...) by madman0621 (@madman0621) on CodePen.

5、参考连接

单行/多行文本溢出的省略(...)
多行文本溢出显示省略号(...)