css设置超出显示省略号的方法：1、使用“overflow:hidden;”语句把超出的部分隐藏起来；2、使用“text-overflow:ellipsis;”语句在文本溢出包含元素时，显示省略符号来代表被隐藏的部分。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css设置超出显示省略号可分两种情况
单行文本溢出显示省略号…
多行文本溢出显示省略号…
立即学习“前端免费学习笔记（深入）”；
视频教程：点击进入
但使用的核心代码是一样的：需要先使用“overflow:hidden;”来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。
overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis;当文本对象溢出是显示…，当然也可是设置属性为clip不显示点点点；
实现代码
1、单行文本溢出显示省略号…
*{margin: 0px;padding: 0px;}.box{width: 300px;height: 500px;margin: 50px auto;}.overflow{width:220px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;}css单行文本超出长度显示省略号
css单行文本超出长度显示省略号
效果图：
2、多行文本溢出显示省略号…
*{margin: 0px;padding: 0px;}.box{width: 280px;height: 62px;margin: 50px auto;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，css多行文本超出长度显示省略号。
（学习视频分享：css视频教程）
以上就是css怎么设置超出显示省略号的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621840.html
微信扫一扫 
支付宝扫一扫 
