多行文字溢出显示省略号可通过-webkit-line-clamp实现，需配合display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden使用，适用于现代浏览器，如设置3行截断则写-webkit-line-clamp: 3，注意line-height固定以确保截断准确，兼容性方面IE不支持，Firefox需JavaScript辅助，可采用字符截断或服务端处理作为降级方案。
多行文字溢出时显示省略号，在CSS中可以通过 -webkit-line-clamp 实现。这是一个非标准但被广泛支持的属性，适用于现代浏览器（尤其是移动端和主流桌面浏览器），能有效控制文本在指定行数后截断并显示“...”。
基本语法与结构
使用 -webkit-line-clamp 需要结合几个关键的CSS属性：
display: -webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 控制显示行数 */
overflow: hidden;
说明：
- display: -webkit-box：将容器设为弹性盒子（仅 WebKit 内核下生效）
- -webkit-box-orient: vertical：设置子元素垂直排列
- -webkit-line-clamp：限制块元素显示的行数
- overflow: hidden：确保超出部分被隐藏
实际代码示例
比如要实现一个最多显示 3 行文本的段落：
立即学习“前端免费学习笔记（深入）”；
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
}
HTML 中：
<p class="text">这是一段很长的文字内容……当超过三行时会自动截断并显示省略号。
</p>
注意事项与兼容性
虽然 -webkit-line-clamp 很实用，但仍需注意以下几点：
- 属于 WebKit 前缀属性，不是所有浏览器都完美支持（如 IE 完全不支持）
- 在 Firefox 中需要额外处理（可用 JavaScript 模拟或降级显示）
- line-height 最好固定，避免因字体渲染差异导致截断位置不准
- 不能与
line-clamp标准语法混用（目前标准仍在草案阶段）
备用方案建议
如果需要兼容性更强的方案，可以考虑：
- 使用 JavaScript 计算高度，动态截取文本并添加“...”
- 限制字符数 + 单行省略（
text-overflow: ellipsis）作为降级 - 服务端截断文本，前端只做展示
基本上就这些。对于大多数现代项目，-webkit-line-clamp 是解决多行文本溢出最简洁有效的方式，只要项目不要求完全兼容老式浏览器，可以直接使用。
