面试题：CSS 怎么实现单行、多行文本溢出隐藏？

在实际开发中，经常需要对超出容器宽度或高度的文本进行“溢出隐藏 + 省略号”处理，以保证 UI 的整洁性。CSS 提供了标准的属性组合来实现这一效果。

---

一、实现原理

核心思路是：

1. 强制不换行（white-space）
2. 溢出隐藏（overflow: hidden）
3. 显示省略号（text-overflow: ellipsis）

这三个属性必须配合使用才能生效。

---

二、单行文本溢出隐藏

适用于标题、列表项等需要单行显示的场景。

✅ 实现代码：

.single-line {
  overflow: hidden;          /* 溢出隐藏 */
  white-space: nowrap;       /* 强制不换行 */
  text-overflow: ellipsis;   /* 超出部分显示省略号 */
  width: 200px;              /* 必须有固定宽度或最大宽度 */
}

✅ HTML 示例：

<div class="single-line">
  这是一段很长的文本，超出容器后会显示省略号...
</div>

🔹 关键点：

• width 或 max-width 必须设置，否则容器无限扩展，不会触发溢出。
• text-overflow: ellipsis 仅在块级元素上有效。

---

三、多行文本溢出隐藏

适用于文章摘要、评论等内容，限制显示 2~3 行后加省略号。

⚠️ 注意：CSS 原生不支持多行省略号，需借助 WebKit 私有属性 或 其他技巧。

---

✅ 方法 1：使用 -webkit-line-clamp（推荐，现代浏览器）

.multi-line {
  display: -webkit-box;          /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 3;         /* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  /* 可选：兼容老版本 WebKit */
  line-clamp: 3;
}

✅ HTML 示例：

<div class="multi-line">
  这是一段很长的多行文本内容，用于演示多行文本溢出隐藏的效果。
  当文本超过指定行数时，末尾会自动显示省略号...
</div>

🔹 优点：代码简洁，兼容性较好（Chrome、Safari、Edge、Firefox 70+）
🔹 缺点：非标准属性，但在现代项目中广泛使用。

---

✅ 方法 2：伪元素 + 定位（兼容性更好，但复杂）

适用于需要兼容老浏览器的场景。

.multi-line-fallback {
  position: relative;
  line-height: 1.4em;
  height: 4.2em; /* 3行 * 1.4em */
  overflow: hidden;
}

/* 使用 ::after 添加省略号 */
.multi-line-fallback::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 5px;
  background: white; /* 或线性渐变遮罩 */
  background: linear-gradient(to right, transparent, white 50%);
}

🔹 缺点：

• 高度必须固定，不灵活
• 背景色需与容器一致
• 不支持响应式字体变化

---

四、完整对比表

方案	兼容性	是否响应式	推荐度	适用场景
单行 ellipsis	所有浏览器	✅	⭐⭐⭐⭐⭐	标题、列表项
-webkit-line-clamp	现代浏览器	✅	⭐⭐⭐⭐☆	多行文本（摘要、评论）
伪元素定位	兼容老浏览器	❌	⭐⭐⭐	需要兼容 IE 的项目

---

五、常见问题与注意事项

❌ 为什么 text-overflow: ellipsis 不生效？

1. 缺少 overflow: hidden
2. 缺少 white-space: nowrap（单行）
3. 没有设置固定宽度（width / max-width）
4. 元素不是块级元素

✅ 如何让省略号紧贴文字？

确保 text-overflow: ellipsis 和 white-space: nowrap 正确配合。

✅ 多行省略号是否支持动画？

不支持。-webkit-line-clamp 是静态裁剪，无法做展开/收起动画。如需交互，建议用 JavaScript 控制显示行数。

---

六、面试加分点

技巧	说明
🌟 理解浏览器渲染机制	知道 line-clamp 是 WebKit 私有属性
🌟 能写出兼容方案	既能写现代方案，也能写降级方案
🌟 关注可访问性	对截断的文本添加 title 属性，鼠标悬停显示全文
“`html

…

“`
| 🌟 性能意识 | 避免在长列表中频繁使用复杂布局 |

---

💬 一句话总结：

“单行溢出用 white-space: nowrap + overflow: hidden + text-overflow: ellipsis；多行溢出推荐使用 -webkit-line-clamp；老项目可用伪元素模拟。关键是理解其依赖条件和浏览器兼容性。”

在面试中，能清晰区分单行/多行实现，并说明优缺点和兼容性，会显得你具备实战经验和细节把控能力。