css一行内超出文字出现省略号

最新推荐文章于 2025-06-24 09:47:52 发布

原创最新推荐文章于 2025-06-24 09:47:52 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

知识点专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS实现文字超出一行时自动显示省略号的方法，通过设置overflow、text-overflow和white-space属性，可以优雅地处理文本溢出问题。

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

css一行内超出文字出现省略号

文字超出一行的出现省略号

//html
<p style="width:50px;" class="ellipsis">哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈啊哈</p>

//如果超出p标签的元素就出现省略号
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}