使用-webkit-line-clamp可实现响应式多行文本省略，通过display: -webkit-box;-webkit-line-clamp:2;overflow:hidden等样式限制行数并添加省略号，结合媒体查询调整不同屏幕下的行数与字体大小，提升布局适配性；针对不支持的浏览器（如firefox），采用javaScript截取文本、固定高度隐藏溢出或伪元素模拟省略号作为降级方案，推荐主用-webkit-line-clamp并配合断点控制以优化体验。
在响应式网页设计中，处理多行文本溢出是一个常见需求。当容器宽度随屏幕尺寸变化时，文本可能超出显示区域，影响布局美观。使用 css 可以优雅地实现多行文本的省略号（…）效果，同时保持响应式适配。
1. 使用 -webkit-line-clamp 实现多行省略
现代浏览器支持 -webkit-line-clamp 属性，可限制块元素显示的行数，并在末尾添加省略号。
关键样式如下：
.text-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 控制显示行数 */ overflow: hidden; text-overflow: ellipsis; }
该方法适用于大多数现代浏览器（chrome、safari、edge），但不被 Firefox 原生支持。
立即学习“前端免费学习笔记（深入）”；
2. 响应式适配技巧
为了让多行省略在不同屏幕下表现合理，可以结合媒体查询动态调整行数或字体大小。
- 在移动端减少显示行数，避免内容过长影响布局
- 调整 line-height 和 font-size 确保高度一致
- 设置最大高度（max-height）配合 clamp 行为更稳定
@media (max-width: 768px) { .text-ellipsis { -webkit-line-clamp: 1; } }
3. 兼容性处理与降级方案
对于不支持 -webkit-line-clamp 的环境，可通过以下方式增强兼容性：
- 使用 javascript 动态截取文本并添加“…”
- 设置固定高度和 overflow: hidden 作为视觉兜底
- 利用伪元素模拟省略号（需精确计算行高）
例如：
.text-ellipsis-fallback { max-height: 3em; line-height: 1.5; overflow: hidden; position: relative; } .text-ellipsis-fallback::after { content: "..."; position: absolute; bottom: 0; right: 0; background: white; padding: 0 2px 0 4px; }
基本上就这些。主流方案推荐使用 -webkit-line-clamp，搭配响应式断点控制体验更佳。