>  Q&A  >  본문

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

<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不会

阿神阿神2766일 전489

모든 응답(2)나는 대답할 것이다

  • 迷茫

    迷茫2017-04-17 11:14:51

    设置 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/

    회신하다
    0
  • PHP中文网

    PHP中文网2017-04-17 11:14:51

    在给a设置的时候,加上display: inline-block;

    회신하다
    0
  • 취소회신하다