在我们日常开发展示页面的时候，时常会遇到一段文本数量过长（超过了嵌套它的父盒子的长度）的情况，不可能完全显示，为了提升用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号.主要分为单行文本溢出和多行文本溢出两种情况。
一，单行文本溢出情况处理方式
/* 注意css样式要给溢出文字的父盒子添加 */
/* 文字强制不换行 */
white-space: nowrap;
/* 文字溢出换省略号 */
text-overflow: ellipsis;
/* 溢出文字隐藏 */
overflow: hidden;
二，多行文本溢出情况处理方式
多行文本一般分为两种情况
（1） 基于高度截断
<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">1111111111111111111111111111111111111111111111111111111111</div>
</body>
原理：就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字。它的优点是：响应式截断，根据不同的宽进行调整，兼容性好。
- position: relative：为伪元素绝对定位
- overflow: hidden：文本溢出限定的宽度就隐藏内容）
- position: absolute：给省略号绝对定位
- line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px：设定当前元素高度
- ::after {} ：设置省略号样式
(2)基于行数截断
<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>
</head>
<body>
<p>这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本这是很长的文本
</p>
</body>
- position: relative：为伪元素绝对定位
- overflow: hidden：文本溢出限定的宽度就隐藏内容）
- position: absolute：给省略号绝对定位
- line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px：设定当前元素高度
- ::after {} ：设置省略号样式
