前言
在日常开发展示页面，如果一段文本的数量过程，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候需要我们将溢出的文本显示成省略号
文本溢出省略号显示方式：
- 单行文本溢出
- 多行文本溢出
一、实现方式
2.1 单行文本溢出
实现涉及的 CSS 属性有：
text-overflow：规定当文本溢出时，显示省略符号来代表修剪的文本- clip：当对象内文本溢出部分裁切掉
- ellipsis：当对象内文本溢出时显示省略标记（...）
white-space：设置文字在一行显示，不能换行overflow：文字长度超出限制宽度，则隐藏超出的内容
overflow设为hidden：普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略；
white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础
text-overflow只有在设置了overflow:hidden``和white-space:nowrap才能够生效的
举个栗子：
<style>
p{
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p>
2.2 多行文本溢出
多行文本溢出，可以分为两种情况：
- 基于高度截断
- 基于行数截断
2.2.1 基于高度截断
伪元素 + 定位，核心的CSS代码结构如下：
- position: relative：为伪元素绝对定位
- overflow: hidden：文本溢出限定的宽度就隐藏内容）
- position: absolute：给省略号绝对定位
- line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px：设定当前元素高度
- ::after {} ：设置省略号样式
实现原理：
通过伪元素绝对定位到行尾并遮住文字，再通过 overflow:hidden隐藏多余文字
优点：
- 兼容性好，对各大主流浏览器有好的支持
- 响应式截断，根据不同宽度做出调整
一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分
举个栗子：
<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>
2.2.2 基于行数截断
核心的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 >
