overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值:
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁,其余内容将不可见
- scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
- auto - 与 scroll 类似,但仅在必要时添加滚动条
注释:overflow 属性仅适用于具有指定高度的块元素。
实例代码;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:500px;
height:300px;
background-color:green;
color:white;
text-indent:2em;
overflow:scroll;
padding:20px;
}
</style>
</head>
<body>
<h1>overflow 属性溢出实例</h1>
<p>overflow属性控制着当内容太大以至于区域无法容纳时发生的情况。</p>
<div>这这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,
这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长>文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,>这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长>文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,>这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长>文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,>这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长文本字段,这是一段长>文本字段,是一段长文本字段,</div>
</body>
</html>
~
运行效果;
评论