CSS控制的内容超过容器宽度后显示省略号

最新推荐文章于 2024-09-19 08:00:00 发布

hjingtao

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量680

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hjingtao/article/details/8934004

本文介绍如何使用CSS属性`white-space`和`text-overflow`来精确控制文本在网页上的显示方式，特别针对解决文本溢出和换行的问题，提供了一个实用的解决方案。

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

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

注：

“white-space:nowrap”是强制在一行内显示所有文本，不回行。

text-overflow是CSS3新增的属性，IE6以上版本支持。它可以带2个参数：clip [不显示省略标记（...），而是简单的裁切]，ellipsis[当对象内文本溢出时显示省略标记（...）]。所以，这个方法是不支持Firefox的。因此，我们还要加上一句overflow: hidden，让多余文字在ff中隐藏。