使用-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 厂商前缀，但在现代主流浏览器中支持良好。
使用 -webkit-line-clamp 实现多行省略
需要同时使用以下几个 CSS 属性配合：
display: -webkit-box：将元素设为弹性伸缩盒子（WebKit 内核）-webkit-line-clamp：限制文本行数-webkit-box-orient: vertical：设置伸缩盒子的子元素垂直排列overflow: hidden：隐藏溢出内容text-overflow: ellipsis：超出部分显示省略号
示例代码：
.multi-line-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; /* 限制显示3行 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;}
注意事项与兼容性
该方法在大多数现代浏览器中可用，但需注意以下几点：
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
立即学习“前端免费学习笔记（深入）”；
不支持 IE 和部分老版本浏览器在 Firefox 中需使用额外 JavaScript 模拟或采用其他方案行高（line-height）会影响截断位置，建议固定行高以保证一致性避免在容器上设置固定高度，否则可能影响裁剪效果
纯 CSS 替代方案（有限支持）
如果不希望依赖 WebKit 特性，可尝试基于绝对定位和遮罩的模拟方式，但灵活性较差：
使用伪元素渐变覆盖末尾文字JavaScript 动态截取字符（更精确但非纯 CSS）
基本上就这些，对于绝大多数移动端和现代桌面端场景，-webkit-line-clamp 是最简单有效的选择。
以上就是如何用css实现多行文本溢出省略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1072431.html
微信扫一扫 
支付宝扫一扫 
