使用-webkit-line-clamp可实现多行文本溢出省略，需配合display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden和text-overflow:ellipsis使用，适用于现代主流浏览器，但不支持IE及部分老版本浏览器，Firefox需JavaScript辅助，建议固定line-height以保证截断一致性。
实现多行文本溢出省略，主要通过 CSS 的 -webkit-line-clamp 属性结合其他弹性盒模型属性来完成。虽然该属性属于 WebKit 厂商前缀，但在现代主流浏览器中支持良好。
需要同时使用以下几个 CSS 属性配合：
示例代码：
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
该方法在大多数现代浏览器中可用，但需注意以下几点：
立即学习“前端免费学习笔记（深入）”；
如果不希望依赖 WebKit 特性，可尝试基于绝对定位和遮罩的模拟方式，但灵活性较差：
基本上就这些，对于绝大多数移动端和现代桌面端场景，-webkit-line-clamp 是最简单有效的选择。
以上就是如何用css实现多行文本溢出省略的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
911
收藏
