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

最新推荐文章于 2024-01-25 14:06:28 发布

置顶 535366

最新推荐文章于 2024-01-25 14:06:28 发布

阅读量221

点赞数

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/A535366/article/details/122407413

版权

本文介绍了一种使用CSS来处理文本溢出的方法，包括如何通过设置属性实现文本隐藏、使用省略号显示溢出部分以及控制多行文本的显示。适用于需要优化网页布局以适应不同屏幕尺寸的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.大部分浏览器这个就可以解决

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

2.当有俩行内容时候用，并且兼容方式

      width: 8.4rem;    //超出这个宽度就变成省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 1; //显示几行