li下的a标签超出宽度时使用text-overflow无法省略

最新推荐文章于 2023-09-12 21:36:07 发布

wherewhyi

最新推荐文章于 2023-09-12 21:36:07 发布

阅读量642

点赞数

文章标签： css

本文链接：https://blog.csdn.net/java_wzh123/article/details/107447575

版权

博客讲述了在CSS中遇到的问题，当li下的a标签内容超出宽度时，text-overflow属性无法正常省略内容。原因是text-overflow只对块级元素生效，而a标签默认为内联元素。通过将a标签display属性设置为block或inline-block，并设定宽度，可以解决这个问题。

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

记录text-overflow的一个坑，下方写法text-overflow无效

li{
	list-style: none;
	height: 16px;
	width:175px;
	margin-bottom: 6px;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
a{
	color: #666;
}

原因：text-overflow仅对块级元素才有效，li下的a不是块级元素，所以无效，改成以下写法解决

li{
	list-style: none;
	height: 16px;
	width:175px;
	margin-bottom: 6px;
}
li a{
	color: #666;
	display:block;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width:175px;
}