41 如何实现单行／多行文本溢出的省略样式？
对于文本的溢出，我们可以分成两种形式：
- 单行文本溢出
- 涉及的css属性有：
text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本white-space：设置文字在一行显示，不能换行overflow：文字长度超出限定宽度，则隐藏超出的内容
overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础text-overflow属性值有如下clip：当对象内文本溢出部分裁切掉ellipsis：当对象内文本溢出时显示省略标记（...）
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
- 涉及的css属性有：
<style>
p{
overflow: hidden;
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
```
* 多行文本溢出：多行文本溢出的时候，我们可以分为两种情况：
* 基于高度截断
* 伪元素 + 定位：核心的css代码结构如下：
* `position: relative`：为伪元素绝对定位
* `overflow: hidden`：文本溢出限定的宽度就隐藏内容）
* `position: absolute`：给省略号绝对定位
* `line-height: 20px`：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
* `height: 40px`：设定当前元素高度
* `::after {}` ：设置省略号样式
```html
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
* 实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 `overflow: hidden` 隐藏多余文字
* 这种实现具有以下优点：
* 兼容性好，对各大主流浏览器有好的支持
* 响应式截断，根据不同宽度做出调整
* 一般文本存在英文的时候，可以设置`word-break: break-all`使一个单词能够在换行时进行拆分
* 基于行数截断：纯css实现也非常简单，核心的css代码如下：
* `-webkit-line-clamp: 2`：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的`WebKit`属性）
* `display: -webkit-box`：和1结合使用，将对象作为弹性伸缩盒子模型显示
* `-webkit-box-orient: vertical`：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
* `overflow: hidden`：文本溢出限定的宽度就隐藏内容
* `text-overflow: ellipsis`：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
<style>
p {
width: 400px;
border-radius: 1px solid red;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >
* 可以看到，上述使用了`webkit`的CSS属性扩展，所以兼容浏览器范围是PC端的`webkit`内核的浏览器，由于移动端大多数是使用`webkit`，所以移动端常用该形式
* 需要注意的是，如果文本为一段很长的英文或者数字，则需要添加`word-wrap: break-word`属性
* 还能通过使用javascript实现配合css，实现代码如下所示：
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
$(function(){
//获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
$('p').each(function(i, obj){
var lineHeight = parseInt($(this).css("line-height"));
var height = parseInt($(this).height());
if((height / lineHeight) >3 ){
$(this).addClass("p-after")
$(this).css("height","60px");
}else{
$(this).removeClass("p-after");
}
});
})