CSS实现内容超过长度后以省略号显示

最新推荐文章于 2022-08-17 21:04:17 发布

原创最新推荐文章于 2022-08-17 21:04:17 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

html+CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用CSS样式实现文本溢出时的优雅显示方法，包括如何通过white-space、overflow和text-overflow属性控制文本不换行并用省略号表示溢出部分。

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

样式：

{width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}

说明：

white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替

大爷，请赏我点铜板买喵粮自己吃，您的支持将鼓励我继续创作！(支付宝)