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

最新推荐文章于 2025-07-29 18:28:15 发布

哈哈哈蜗牛修仙之路

最新推荐文章于 2025-07-29 18:28:15 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：知识点文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43970021/article/details/88041109

知识点专栏收录该内容

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;
}