overflow溢出处理

语法:

overflow : visible | auto | hidden | scroll

相关属性:overflow-x , overflow-y

取值:

visible:
不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto:
此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden:
不显示超过对象尺寸的内容
scroll:
总是显示滚动条

说明:

  1. 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
  2. 设置textarea对象为hidden值将隐藏其滚动条。
  3. 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。

示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>溢出处理</title>
    <style type="text/css">
        #cont1 div,#cont3 div,#cont5 div{width:300px; height:200px;}
        #cont2 div,#cont4 div,#cont6 div{width:100px; height:50px;}
        .cont{float:left; margin:4px; overflow:visible; padding:10px; width:200px; height:100px;}
        .cont,.cont div{border:2px solid red;}
    </style>
</head>
<body>
    <div id="cont1" class="cont" style="overflow-x:scroll; ">
        <div>style="overflow-x:scroll; "</div>
    </div>
    <div id="cont2" class="cont" style="overflow-x:scroll; ">
        <div>style="overflow-x:scroll; "</div>
    </div>
    <div id="cont3" class="cont" style="overflow-x:auto; ">
        <div>style="overflow-x:auto; "</div>
    </div>
    <div id="cont4" class="cont" style="overflow-x:auto; ">
        <div>style="overflow-x:auto; "</div>
    </div>
    <div id="cont5" class="cont" style="overflow-x:hidden; ">
        <div>style="overflow-x:hidden; "</div>
    </div>
    <div id="cont6" class="cont" style="overflow-x:hidden; ">
        <div>style="overflow-x:hidden; "</div>
    </div>
</body>
</html> 

 

原文地址:https://www.cnblogs.com/zhourourou/p/5210596.html