css文本溢出隐藏显示省略号

最新推荐文章于 2024-08-06 19:00:26 发布

今天拔牙么

最新推荐文章于 2024-08-06 19:00:26 发布

阅读量373

点赞数

分类专栏：前端 css3

本文链接：https://blog.csdn.net/weixin_48271592/article/details/116737611

版权

本文介绍了如何使用CSS实现文本溢出时隐藏并显示省略号的效果，包括单行文本和多行文本的处理方法。涉及到box-orient属性的使用，以及在不同浏览器中兼容性的解决方案，如Firefox的-moz-box-orient和WebKit的-webkit-box-orient属性。同时提到了flexbox布局在处理此类问题中的应用。

摘要由CSDN通过智能技术生成

纯css实现文本溢出隐藏显示省略号

1.单行文本溢出隐藏省略号

.text{
   
  display:block;//行内元素转块元素
  width:200px;//设置宽度
  white-space: nowrap;//强制不换行
  overflow: hidden;//溢出内容隐藏
  text-overflow: ellipsis;//溢出部分用省略号代替
  }