CSS样式-溢出

overflow：

visible ：不剪切内容，不出滚动条（缺省）

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style  type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <div>
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
    </div>
</body>
</html>

 

 

auto：根据内容，决定使用hidden还是scroll

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Document</title>
    <style  type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
    </div>
</body>
</html>
 
内容较长时样式：

 

 内容较少时样式：

 

 

hidden：剪切内容，不出滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Document</title>
    <style  type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
    </div>
</body>
</html>
 

 

 

scroll：剪切内容，无论如何都出滚动条，很丑

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style  type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
        就会感觉好地方就刚好放假都会感觉方大化工积分兑换惊魂甫定结核杆菌凤凰
        国际返回结果合法的几个环节都符合规范的很干净方大化工积分兑换
    </div>
</body>
</html>
 
字多的样式：
 

 

 字少的样式：

 

 

posted @ 2021-03-28 14:31  #Friday  阅读(96)  评论(0)    收藏  举报