首页 > 开发 > CSS > 正文

text-overflow为何会在li的子标签a下失效

2017-09-12 09:39:06  来源: 网友分享
<ul>    <li><span>2014-05-28</span><a href="news.html" title="aa">这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告这不是广告</a></li></ul>

设置的CSS如下

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

为什么给a设置同样的样式会失效,而li不会

解决方案

设置 a { display: inline-block; } 即可。

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.
- via: https://css-tricks.com/almanac/properties/t/text-overflow/