css只能显示两行，超出两行用点点点表示，css溢出

Hero_rong

于 2019-08-13 16:41:30 发布

阅读量6.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/99447405

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用CSS属性实现文本超出指定行数后的省略显示效果，关键在于运用text-overflow、overflow及-webkit-line-clamp等属性。

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

这个属性想设置超出几行，就写几，如上是超出6行，超出的用点点点表示

  text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;

这里是关键，想超出几行就写几

-webkit-line-clamp: 6;

如果是一行超出的话，就这么写

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

溢出的效果图