文字内容超出省略（单行与多行）

Where-to-go

于 2020-06-19 09:57:17 发布

阅读量195

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_45523183/article/details/106850275

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文分享了CSS中实现文字超出省略的实用方法，包括单行和多行文字的处理技巧。通过设置特定的CSS属性组合，可以有效地控制文本在页面上的显示，避免布局混乱。

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

CSS文字超出省略

由于经常使用文字超出省略功能，分享一下使用组合

单行文字超出省略

p {
   overflow:hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
}

多行文字超出省略

父元素要设置宽高

p {
   overflow:hidden;
   text-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:5;    /*定义的数字为显示的行数*/
   -webkit-box-orient:vertical;
}