在前端开发中，如何通过 CSS 来处理文本溢出隐藏？请分别说明单行文本和多行文本的溢出隐藏实现方式，并提及可能涉及的 CSS 属性。
考察说明
考查对 CSS 文本溢出处理机制的掌握，包括单行与多行文本的常见实现和属性作用。
回答思路
- 【回答框架 1】单行文本溢出隐藏通常使用三个属性组合：white-space: nowrap 强制不换行，overflow: hidden 隐藏超出部分，text-overflow: ellipsis 在溢出处显示省略号。这三个属性缺一不可，且需设置在块级元素上。
- 【回答框架 2】多行文本溢出隐藏更复杂，传统方法使用 -webkit-line-clamp 对 WebKit 浏览器有效，配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 使用。但需注意兼容性，非 WebKit 浏览器可能需要其他方案。
- 【回答框架 3】另一种多行实现是使用 JavaScript 动态截断，但纯 CSS 的通用方案常采用 max-height 和 overflow: hidden 配合渐变遮罩模拟省略效果，但无法显示真正的省略号。
- 【回答框架 4】现代 CSS 支持 line-clamp 标准属性（如 overflow: clip 与 line-clamp 结合），但浏览器支持情况需确认。在项目中，我通常会根据浏览器兼容性需求选择方案。
- 【关键点 1】单行溢出需同时设置 white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
- 【关键点 2】多行溢出常用 -webkit-line-clamp，搭配 -webkit-box 和 -webkit-box-orient 实现。
- 【关键点 3】多行溢出的非 WebKit 方案常采用 max-height 加渐隐效果，或借助 JavaScript 计算高度。
- 【易错点 1】忽略 display: -webkit-box 和 -webkit-box-orient: vertical 时，-webkit-line-clamp 不会生效。
- 【易错点 2】text-overflow: ellipsis 必须配合 overflow: hidden 和 white-space: nowrap 才能用于单行，不能直接用于多行。
- 【易错点 3】仅用 max-height 隐藏无法提供省略号，视觉体验较差。