优先使用-webkit-line-clamp实现多行文本溢出省略，配合display: -webkit-box和-webkit-box-orient: vertical，适用于现代浏览器；2. 对于兼容性要求高的场景，采用伪元素::after添加“...”遮罩模拟省略效果，通过max-height限制行数并隐藏溢出内容；3. 需精确控制时可用JavaScript动态截断文本，基于lineHeight计算最大高度并逐步删减内容直至不溢出；4. 注意语义化、响应式、字体加载及无障碍访问问题，推荐-webkit-line-clamp为主、JS回退为辅的综合方案。
多行文本溢出处理在CSS布局中很常见，尤其在卡片列表、新闻摘要等场景下。虽然单行溢出用text-overflow: ellipsis就能解决，但多行需要更灵活的方案。以下是几种实用且兼容性较好的处理技巧。
1. 使用 -webkit-line-clamp 实现多行省略
这是目前最简单直接的方式，适用于现代浏览器，支持 WebKit 内核（Chrome、Safari）以及新版 Firefox。
关键属性：-webkit-line-clamp、display: -webkit-box、-webkit-box-orient: vertical
.multi-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制显示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
这个方法限制是只能用于块级元素，且必须配合-webkit-box使用。对于非WebKit浏览器需注意降级处理。
立即学习“前端免费学习笔记（深入）”；
2. 纯 CSS 模拟 + 伪元素遮罩（兼容性更强）
当需要支持老旧浏览器或追求更好控制时，可以用“内容遮罩”方式模拟省略效果。
思路：让文本自然换行并限制高度，再用::after添加渐变或纯色遮罩，覆盖末尾多余文字。
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
.fallback-ellipsis {
position: relative;
max-height: 4.5em; /* 假设行高1.5，3行就是4.5em */
line-height: 1.5;
overflow: hidden;
}
.fallback-ellipsis::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 5px;
background: white; /* 或 linear-gradient(to right, transparent, #fff 60%) */
}
注意：::after不能插入真实文本到内容流，所以“...”只是视觉提示，实际文本并未截断。适合对语义要求不高的场景。
3. JavaScript 动态截断（最精确）
如果需要严格控制字符数或确保省略符可点击展开，JS 方案更可靠。
基本逻辑：通过offsetHeight与scrollHeight比较判断是否溢出，逐步删减内容直到刚好容纳。
function truncateText(el, maxLines) {
const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
const maxHeight = lineHeight * maxLines;
if (el.scrollHeight > maxHeight) {
let text = el.innerText;
while (el.scrollHeight > maxHeight && text.length > 0) {
text = text.slice(0, -1);
el.innerText = text + '...';
}
}
}
可在window.onload或组件渲染后调用。优点是结果精准，缺点是增加脚本依赖，影响性能（大量文本时不推荐）。
4. 注意事项与最佳实践
不同方案适用不同场景，选择时要考虑以下几点：
- 语义化需求：若搜索引擎需抓取完整文本，避免用 JS 截断 innerText
- 响应式适配：宽度变化可能导致行数改变，建议结合 CSS 容器查询或重新计算
- 字体加载影响：自定义字体未加载完时，line-height 可能不准，导致截断异常
- 无障碍访问：被隐藏的文本对屏幕阅读器不可见，必要时提供“展开全文”按钮
基本上就这些。优先推荐-webkit-line-clamp方案，搭配 JS 回退处理兼容性问题，既能保持简洁又能覆盖大多数情况。
