li 内容超出时隐藏

编写CSS时可能会遇到li ul 之类元素的内容超出,导致布局出现问题,第一时间可能会想到overflow: hidden;

有很多类似的元素并不具备overflow的特性,遇到这种情况,需在元素外层加入一层div,通过div的overflow: hidden特性来完成这种需求。

--markup--<div style="overflow: hidden;">
    <ul>        
        <li></li>
    </ul>
</div>

--css--overflow: hidden;

ellipsis; scroll;

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden    内容会被修剪,并且其余内容是不可见的。

scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit    规定应该从父元素继承 overflow 属性的值。

ellipsis 内容会被修剪,并且其余内容以省略号代替。