如题,text-overflow 属性在 li 下包含的 a 标签中失效,比如在下面代码中即使声明了 text-overflow 以及 white-space,仍然无法实现超出文字变为省略号:
html 代码:
<ul> <li><a href="http://www.02405.com">零五科技-自由的分享 IT 技术!零五科技-自由的分享 IT 技术!零五科技-自由的分享 IT 技术!零五科技-自由的分享 IT 技术!零五科技-自由的分享 IT 技术!</a></li> </ul>
css 代码:
li{ overflow: hidden; white-space: nowrap; text-overflow:ellipsis; width: 800px; }
解决方案:
设置 a { display: inline-block; } 。
结合上例最终的 css 代码为:
li{ overflow: hidden; white-space: nowrap; text-overflow:ellipsis; width: 800px; } li a{ display:inline-block; }
本文为原创文章,版权归主机之家测评所有,欢迎分享本文,转载请保留出处!