li 内容超出隐藏问题 - css样式

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

很多html元素不具备overflow特性,此类情况需在元素外层加入一层div,利用div overflow: hidden特性:

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

overflow: hidden;

ellipsis; scroll;

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

hidden:内容会被修剪,且多余内容不可见。

scroll:内容会被修剪,但浏览器会显示滚动条。

auto:如果内容被修剪,浏览器会显示滚动条。

inherit:规定从父元素继承overflow属性值。

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