文本折行，就是控制超长文本在容器里怎么换行显示，是前端布局里非常常用的技巧，下面分两种场景拆解。
🔹 单行折行（超出隐藏）
（超出自动裁切）
核心逻辑：固定宽度后，超出部分隐藏，末尾显示省略号，几乎所有列表、标题都这么用。
.single-line {
/* 强制不换行 /
white-space: nowrap;
/ 超出隐藏 /
overflow: hidden;
/ 超出变省略号 */
text-overflow: ellipsis;
}
效果示意图：
┌─────────────────────┐
│ 这是一段很长很长的… │
└─────────────────────┘
🔹 指定行数折行（超出隐藏）
（固定行数裁切）
比单行多了webkit盒子控制行数，现代浏览器基本都支持，是目前最通用的方案。
.multi-line {
overflow: hidden;
/* 只显示 2 行 /
display: -webkit-box;
-webkit-line-clamp: 2;
/ 按单词/字符折行 */
-webkit-box-orient: vertical;
}
如果要改行数，只需要改-webkit-line-clamp后面的数字就行，比如改3行就写3。
效果示意图：
┌─────────────────────┐
│ 这是一段很长很长的文│
│ 本，超过两行就会隐… │
└─────────────────────┘
⚠️ 兼容避坑（老浏览器兼容）
如果需要兼容不支持-webkit-line-clamp的老浏览器，可以用伪元素遮罩法，实现思路是：
1. 固定容器高度=行高×行数
2. 超出部分隐藏
3. 右下角加个半透明背景的伪元素盖着，模拟省略号效果
.fallback-multi {
/* 2行高度：行高20px × 2 */
line-height: 20px;
max-height: 40px;
overflow: hidden;
position: relative;
}
/* 右下角加省略号遮罩 */
.fallback-multi::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 4px;
background: #fff;
}
两种方案的核心差异对比：
方案类型 优点 缺点 适用场景
单行折行 全浏览器兼容，代码少 只能控制一行 标题、列表项、按钮文本
webkit行级裁切 精准控制行数，原生实现 依赖webkit内核 绝大多数现代浏览器项目
伪元素兼容方案 兼容所有浏览器 省略号位置不够精准 需要兼容老浏览器的项目