使用 -webkit-line-clamp 配合 display: -webkit-box 和 -webkit-box-orient: vertical 可以解决多行文本截断问题，这是目前兼容性最好的方案。虽然 box-orient 属性本身已被废弃，但在 -webkit- 前缀下依然有效且被广泛支持。对于不支持该方案的浏览器，可以通过 javascript 进行降级处理，或者使用 css text-overflow: ellipsis 仅实现单行截断。
为什么 box-orient 被视为废弃但仍需使用？
box-orient 在 CSS Flexible Box Layout Module Level 1 规范中被标记为 deprecated（废弃），因为现代 Flexbox 布局不再需要它来定义主轴方向。然而，WebKit 内核浏览器为了保持向后兼容，仍然支持带有 -webkit- 前缀的旧版弹性盒模型语法。因此，在使用 display: -webkit-box 时，必须同时指定 -webkit-box-orient: vertical，否则子元素会默认水平排列，导致 -webkit-line-clamp 失效。这种写法利用了 WebKit 对旧规范的残留支持，是目前实现多行省略的标准做法。
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}如何在不依赖 box-orient 的情况下实现类似效果？
如果项目严格禁止使用已废弃的属性，可以考虑使用 CSS Grid 或 Flexbox 结合伪元素来实现视觉上的截断效果，但这通常不如 -webkit-line-clamp 精确。另一种更现代的方案是使用 CSS clamp() 函数限制高度，但无法自动添加省略号。最可靠的替代方案是 JavaScript 动态计算行数并插入省略号。以下代码展示了如何使用 JS 实现与 CSS 方案相同的效果，适用于所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
function clampText(element, maxLines) {
const style = window.getComputedStyle(element);
const lineHeight = parseFloat(style.lineHeight);
const maxHeight = lineHeight * maxLines;
element.style.overflow = 'hidden';
element.style.position = 'relative';
while (element.scrollHeight > maxHeight) {
element.textContent = element.textContent.slice(0, -1);
if (element.textContent.length === 0) break;
}
// 添加省略号
if (element.scrollHeight > maxHeight && element.textContent.length > 0) {
element.textContent = element.textContent.slice(0, -1) + '...';
}
}当文本内容不足三行时会发生什么？
当文本内容少于设定的行数时，-webkit-line-clamp 不会强制截断，而是正常显示所有内容。此时 overflow: hidden 也不会隐藏任何内容，因为内容高度未超过容器高度。这意味着该方案是自适应的：内容少时完整显示，内容多时截断并添加省略号。开发者无需额外判断文本长度，CSS 会自动处理边界情况。需要注意的是，如果父容器没有明确的高度或宽度限制，可能需要确保容器有明确的尺寸，以便正确计算行数。
