overflow?

456 阅读2分钟

overflow

  • overflow:hidden;超出元素的高度,就把文字隐藏(常用)
  • overflow:auto;浏览器自动判断是否超出元素的高度,如果内容超出盒子的大小,会自动出现滚动条,如果没有超出盒子的大小,则不出滚动条
  • overflow:scroll;不管元素的内容是否超出元素的宽高,都会出现滚动条
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>68.</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            /*overflow: hidden;*//*文字超出,可以把超出的部分隐藏*/
            overflow: auto;/*会有滚动条*/
            overflow-x:auto ;
            overflow-y:auto ;
            overflow: scroll;/*x轴,y轴都有滚动条*/
        }
    </style>

</head>
<body>
<div class="box">
文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字
</div>
</body>
</html>