css文本超出隐藏显示省略号以及多行文本省略号失效的问题

最新推荐文章于 2024-05-21 14:00:56 发布

竹子js

最新推荐文章于 2024-05-21 14:00:56 发布

阅读量7.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 文本超出隐藏省略号失效

本文链接：https://blog.youkuaiyun.com/bamboozjy/article/details/81241234

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，并提供了解决多行文本省略号失效的方法。

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

单行文本：

.box{
    width:300px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行文本：

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  -webkit-box-orient: vertical;
}

多行文本省略号失效解决：添加两行代码即可

.box{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*3表示只显示3行*/
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

因为autoprefixer自动移除老式过时的代码，所以先关闭再开启。

详情请戳这里哦