css设置文本两行后显示省略

Zhencode

于 2020-06-12 20:33:09 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/Zhencode/article/details/106723115

css3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本溢出时显示省略号的方法，特别是当文本超过两行时如何优雅地进行截断。通过设置display、text-overflow、overflow、-webkit-line-clamp和line-clamp等属性，可以实现在不破坏布局的情况下，让过长的文本以省略号结尾。

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

p{
display: -webkit-box;//设置盒子属性
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;//...显示
-webkit-line-clamp: 2;
line-clamp: 2;//显示两行
-webkit-box-orient: vertical;文本方向
}