单行文本溢出省略
对于单行文本，我们可以使用text-overflow属性结合white-space和overflow属性来实现溢出省略。
.single-line {
width: 200px; /* 或其他固定宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
多行文本溢出省略
对于多行文本，CSS本身直到较新版本（如CSS3）才提供了较为直接的解决方案，但老版本的浏览器（如IE）需要一些额外的技巧或JavaScript来实现。现代浏览器（如Chrome, Firefox, Safari等）支持line-clamp属性（注意，这不是CSS标准的一部分，但在许多现代浏览器中得到了支持）。
基于高度截断
多行溢出高度截断主要是通过设置元素的max-height和overflow: hidden;属性来实现的。这种方法不会显示省略号，而是直接截断超出高度的文本。
.multi-line-clamp {
max-height: 100px; /* 根据需要设置最大高度 */
overflow: hidden;
line-height: 20px; /* 根据字体大小设置行高，以便预估显示的行数 */
}
<div class="multi-line-clamp">
这是一段很长的文本，超过指定高度后将不会显示完整内容，而是被截断。
这是一段很长的文本，超过指定高度后将不会显示完整内容，而是被截断。
这是一段很长的文本，超过指定高度后将不会显示完整内容，而是被截断。
这是一段很长的文本，超过指定高度后将不会显示完整内容，而是被截断。
</div>
基于行数截断
基于行数的截断通常需要使用CSS的-webkit-line-clamp属性，但需要注意的是，这个属性并不是所有浏览器都支持（主要是WebKit内核的浏览器，如Chrome、Safari等）。此外，还有一些兼容性较好的替代方案。
1. 使用-webkit-line-clamp
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制显示的行数为3 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
}
<div class="line-clamp">
这是一段很长的文本，将被截断并显示省略号。
这是一段很长的文本，将被截断并显示省略号。
这是一段很长的文本，将被截断并显示省略号。
这是一段很长的文本，将被截断并显示省略号。
这是一段很长的文本，将被截断并显示省略号。
</div>
注意： 这个方法虽然简单，但存在兼容性问题，不适用于所有浏览器。
2. 兼容性较好的替代方案
对于需要更好兼容性的场景，可以使用JavaScript或伪元素结合CSS来实现。以下是一个使用伪元素和定位技术的示例：
.ellipsis {
position: relative;
line-height: 20px; /* 根据需要设置行高 */
max-height: 60px; /* 3行 * 20px/行 = 60px */
overflow: hidden;
}
.ellipsis::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background-color: white; /* 可根据需要调整背景色 */
padding-left: 5px; /* 可根据需要调整 */
}
<div class="ellipsis">
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
这是一段很长的文本，超过指定行数后将显示省略号。
</div>
