单行文本溢出用white-space:nowrap、overflow:hidden和text-overflow:ellipsis实现；多行则通过display:-webkit-box、-webkit-line-clamp和-webkit-box-orient:vertical完成，需限定宽度。
当文本内容超出容器宽度时，用省略号（…）表示溢出是常见的UI需求。CSS提供了几种标准方法来实现单行或多行文本的溢出隐藏并显示省略号。
单行文本溢出省略号
适用于只显示一行文本，超出部分隐藏并以省略号结尾。
关键属性：overflow: hidden：隐藏溢出内容white-space: nowrap：强制文本不换行text-overflow: ellipsis：溢出时显示省略号
示例代码：
.single-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; /* 需指定宽度 */ border: 1px solid #ccc;}
多行文本溢出省略号
用于限制显示2行或更多行文本，超出部分用省略号表示。标准做法依赖 -webkit-line-clamp，目前在主流浏览器中广泛支持。
立即学习“前端免费学习笔记（深入）”；
Matlab语言的特点 中文WORD版
本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
8 查看详情 关键属性：display: -webkit-box：启用弹性盒子模型（WebKit私有）-webkit-line-clamp：限制行数-webkit-box-orient: vertical：设置子元素垂直排列overflow: hidden：配合实现截断效果
示例代码（限制2行）：
.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 200px; line-height: 1.4; border: 1px solid #ddd;}
注意事项与兼容性
虽然上述方法在现代浏览器中表现良好，但仍需注意以下几点：
必须限定容器宽度或最大宽度，否则无法触发溢出多行省略仅在块级元素上有效-webkit-line-clamp 是非标准属性，但在 Chrome、Safari、Firefox（新版）和 Edge 中均可用若需兼容老版本IE，建议使用JS方案或截取文字长度
基本上就这些。掌握这几个核心样式组合，就能应对大多数文本截断场景。
以上就是css文本溢出省略号实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/996341.html
微信扫一扫 
支付宝扫一扫 
