css 单行文本、多行文本超出部分隐藏显示省略号

最新推荐文章于 2024-12-04 08:56:45 发布

原创最新推荐文章于 2024-12-04 08:56:45 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS来优雅地处理文本溢出的问题，包括单行和多行文本的处理方法。通过设置特定的CSS属性，可以实现文本超出部分用省略号代替，保持页面布局整洁。

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

单行文本

overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //显示省略号
white-space: nowrap; //文本不换行

多行文本

overflow: hidden;  // 超出的文本隐藏
text-overflow: ellipsis; //显示省略号
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2;  //显示的行数