如何使用CSS实现响应式多行文本截断_text-overflow ellipsis技巧
使用-webkit-line-clamp可实现响应式多行文本截断，通过display:-webkit-box、-webkit-line-clamp和-webkit-box-orient配合overflow:hidden实现三行省略，结合rem和媒体查询适配不同屏幕，并用@supports进行兼容性处理，避免flex冲突并设置line-height确保视觉一致，适用于新闻列表等场景。
实现响应式多行文本截断并显示省略号（text-overflow: ellipsis）在单行文本中较为简单，但多行场景下需要结合现代CSS属性来完成。以下是几种实用且兼容性较好的方法。
1. 使用 -webkit-line-clamp 实现多行截断
这是目前最常用的方法，适用于大多数现代浏览器，通过 WebKit 提供的私有属性实现跨行省略。
- 将容器设为弹性布局或块级元素
- 使用 display: -webkit-box 启用弹性伸缩盒模型
- 设置 -webkit-line-clamp 控制最大行数
- 添加 -webkit-box-orient: vertical 指定子元素垂直排列
- 配合 overflow: hidden 隐藏溢出内容
示例代码：
.text-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
}
此方法支持响应式：当容器宽度变化时，文本会自动换行并在达到指定行数后截断。
2. 响应式适配与字体一致性
为了确保不同设备上表现一致，注意以下几点：
- 使用相对单位如 em 或 rem 设置 line-height 和 font-size
- 避免固定高度，让 -webkit-line-clamp 自动计算截断位置
- 在
媒体查询中可根据屏幕尺寸调整 -webkit-line-clamp 的值
媒体查询中可根据屏幕尺寸调整 -webkit-line-clamp 的值例如在小屏上只显示两行：
@media (max-width: 768px) {
.text-truncate {
-webkit-line-clamp: 2;
}
}
3. 兼容性处理与降级方案
-webkit-line-clamp 不被部分旧浏览器支持（如 IE），需提供降级策略：
- 对不支持的浏览器可仅显示部分文字 + “…”（通过 JS 截取）
- 使用 CSS 支持检测 @supports 判断是否启用该样式
示例：
@supports (-webkit-line-clamp: 2) {
.text-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
若不支持，则保持默认换行显示，不影响可读性。
4. 注意事项与常见问题
实际使用中需留意：
- 不要与其他 flex 属性冲突（如父级已用 flex，子级再用 -webkit-box 可能异常）
- line-height 影响截断行数的视觉效果，建议明确设置
- 中文字符和英文单词断行规则不同，可用 word-break: break-all 或 hyphens 调整
基本上就这些。这套方案在移动端和桌面端都能稳定工作，适合新闻列表、商品描述等需要响应式截断的场景。
