css内容超过宽度显示省略号没效果，文字超过两行折叠省略

最新推荐文章于 2026-07-02 12:22:38 发布

原创最新推荐文章于 2026-07-02 12:22:38 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

45 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍如何使用CSS实现文本的单行或多行溢出省略效果，包括使用overflow、text-overflow、white-space属性控制文本显示，以及利用-webkit-box、-webkit-line-clamp实现文本的多行折叠。

实现代码

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

没效果解决方案：放置文字的元素使用块级元素例如p，div，不要使用span等行内元素。

例：

// css
.text{
	width: 50px;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}
// html 
<p class="text">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

文字超过两行及以上折叠省略

overflow:hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
text-overflow:ellipsis;//溢出部分用省略号代替
-webkit-line-clamp:2; //设置文本显示两行
-webkit-box-orient:vertical;  //从上到下排列子元素;
white-space:normal;