使用-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 原生支持。
立即学习“前端免费学习笔记（深入）”；
企业管理咨询培训类网站模板(响应式)1.4.2
下载
企业管理咨询培训类网站模板(响应式)安装即用，自带人人站CMS内核，支持响应式，前端banner轮播图文本均已进行可视化配置，伪静态页面生成，支持内容模型、多语言、自定义表单、筛选、多条件搜索等功能。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置
2. 响应式适配技巧
为了让多行省略在不同屏幕下表现合理，可以结合媒体查询动态调整行数或字体大小。
- 在移动端减少显示行数，避免内容过长影响布局
- 调整 line-height 和 font-size 确保高度一致
- 设置最大高度（max-height）配合 clamp 行为更稳定
@media (max-width: 768px) {
.text-ellipsis {
-webkit-line-clamp: 1;
}
}
3. 兼容性处理与降级方案
对于不支持 -webkit-line-clamp 的环境，可通过以下方式增强兼容性：
例如：
.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，搭配响应式断点控制体验更佳。
