您的位置：首页 > 其它

overflow溢出处理

2016-02-23 17:14 295 查看

语法：

overflow ： visible | auto | hidden | scroll

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

取值：

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

说明：

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

设置textarea对象为hidden值将隐藏其滚动条。

对于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航