当一个页面文字过于冗长时，不仅不利于用户视觉上的感受，更不利于网站内的优化。那么我们怎么使用css超出部分显示省略号代替呢？本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的？希望对有需要的朋友有所帮助！
css超出部分显示省略号具体示例代码如下：
css超出部分省略显示测试 .app { width: 400px; height: 28px; line-height: 28px; margin: 50px 0 0 50px; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }创想鸟(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
效果如下图：
注：以上是实现单行文本的溢出显示省略号用text-overflow:ellipsis属性，还需要加宽度width属来兼容部分浏览。
那么单行知道如何操作，多行就简单了。多行的实现方法主要是以下代码：
立即学习“前端免费学习笔记（深入）”；
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
css超出省略部分兼容适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
以上就是当页面文字过多时，怎么用css使超出部分显示省略号？（单/多行代码演示）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610992.html
微信扫一扫 
支付宝扫一扫 
