css文字两行显示，超出显示......

最新推荐文章于 2025-07-04 15:19:43 发布

那一日面朝大海

最新推荐文章于 2025-07-04 15:19:43 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： css web前端大类

本文链接：https://blog.youkuaiyun.com/AN0692/article/details/105529155

web前端大类同时被 2 个专栏收录

29 篇文章

订阅专栏

css

8 篇文章

订阅专栏

本文详细介绍了如何使用CSS的overflow、text-overflow、white-space等属性来处理文本的溢出，特别是在有限空间中显示多行文本的技巧。通过-webkit-line-clamp属性，可以限制文本的显示行数，并使用省略号来表示被截断的部分，同时解决代码编译后某些属性丢失的问题。

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

overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 溢出不换行
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

但是代码经过编译后就把-webkit-box-orient: vertical干掉了

解决方案一：

/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
这样确实解决了编译丢失的情况，但会在编译过程中报warning

解决方案二：

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
问题解决，也不报warning了。