下面是 CSS 中最常用的 单行文本溢出隐藏 和 多行文本溢出隐藏 的几种实现方式，并附上效果对比和完整代码示例（可直接复制到 CodePen 或本地测试）。
1. 单行文本溢出显示省略号（最常用）
.single-line {
width: 300px; /* 必须限制宽度 */
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示 ... */
}<p class="single-line">
这是一段很长很长很长很长很长很长很长很长的文字，会被截断显示省略号
</p>效果：
这是一段很长很长很长很长很长很长很长很长的文字…
2. 多行文本溢出显示省略号（几种主流方案）
方案 A：-webkit-line-clamp（推荐，兼容性最好）
.multi-line-clamp {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示3行 */
overflow: hidden;
text-overflow: ellipsis;
}兼容性：
- Chrome/Edge/Safari/移动端浏览器全部支持
- Firefox 需要额外 polyfill 或改用其他方案
方案 B：纯 CSS 兼容所有浏览器（利用伪元素遮罩）
.multi-line-pure {
width: 300px;
line-height: 1.5em;
max-height: 4.5em; /* line-height × 行数 = 3行 */
overflow: hidden;
position: relative;
}
.multi-line-pure::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding-left: 10px;
background: linear-gradient(to right, transparent, white 50%);
}缺点：最后一行被省略号遮住时，如果刚好填满，会看不到省略号（可通过 padding-right 解决）
方案 C：更完美的纯 CSS 版本（推荐）
.multi-line-perfect {
width: 300px;
line-height: 1.5em;
max-height: 4.5em; /* 3行的高度 */
overflow: hidden;
position: relative;
padding-right: 1em; /* 给省略号留空间 */
}
.multi-line-perfect::before {
content: '';
float: right;
width: 1em;
height: 4.5em; /* 与 max-height 一致 */
}
.multi-line-perfect::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 0.5em;
background: white;
box-shadow: -10px 0 10px white; /* 遮住前面的文字 */
}完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.box { margin: 20px 0; padding: 15px; background: #f5f5f5; border-radius: 8px; }
.single-line {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
padding: 10px;
border: 1px solid #ddd;
}
.multi-line-clamp {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background: #fff;
padding: 10px;
border: 1px solid #ddd;
}
.multi-line-perfect {
width: 300px;
line-height: 1.5em;
max-height: 4.5em;
overflow: hidden;
position: relative;
padding-right: 1em;
background: #fff;
padding: 10px;
border: 1px solid #ddd;
}
.multi-line-perfect::before {
content: '';
float: right;
width: 1em;
height: 4.5em;
}
.multi-line-perfect::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 0.5em;
background: white;
}
</style>
</head>
<body>
<div class="box">
<h3>1. 单行省略</h3>
<p class="single-line">
超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字
</p>
</div>
<div class="box">
<h3>2. 多行省略（-webkit-line-clamp，最推荐）</h3>
<p class="multi-line-clamp">
这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的多行文字，超过三行就会显示省略号。
第二行内容第二行内容第二行内容第二行内容第二行内容。
第三行内容第三行内容第三行内容第三行内容第三行内容第三行内容。
第四行会被截断。
</p>
</div>
<div class="box">
<h3>3. 多行省略（纯CSS，完美兼容所有浏览器）</h3>
<p class="multi-line-perfect">
这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的多行文字，超过三行就会显示省略号。
第二行内容第二行内容第二行内容第二行内容第二行内容。
第三行内容第三行内容第三行内容第三行内容第三行内容第三行内容。
第四行会被截断。
</p>
</div>
</body>
</html>总结推荐：
- 如果只兼容现代浏览器和移动端 → 直接用
-webkit-line-clamp（最简单） - 如果需要兼容所有浏览器（包括老版 Firefox）→ 用「方案 C 完美纯CSS版」
需要支持「点击展开」功能的话，再告诉我，我给你加上 JS 展开/收起版本～
