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

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

原创最新推荐文章于 2023-09-12 21:36:07 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

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