CSS Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS Overflow

overflow属性有以下值

overflow可以同时设置水平与垂直方向的溢出处理，另外也可以使用overflow-x, overflow-y分别控制水平方向、垂直方向

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

 

---

overflow: visible

默认情况下，overflow 的值为 visible， 意思是内容溢出元素框

overflow: visible溢出效果

overflow: visible代码

<style type="text/css">
  #overflow_visible {
    background: #4CAF50;
    color: green;
    padding: 0px;
    width: 200px;
    height: 100px;
    overflow: visible;
    border: 5px solid #ff99aa;
}

</style>
<div id="overflow_visible">
<p>这里的文本内容会溢出元素框。</p>

<p>这里的文本内容会溢出元素框。</p>

<p>这里的文本内容会溢出元素框。</p>

<p>这里的文本内容会溢出元素框。</p>
</div>

 

---

overflow: hidden

如果overflow的值为hidden，那么超出父容器的内容会被隐藏

overflow: hidden效果

overflow: hidden 代码示例

<style type="text/css">
  #overflow_hidden {
    background: #4CAF50;
    color: yellow;
    padding: 0px;
    width: 400px;
    height: 100px;
    overflow: scroll;
    border: 5px solid #ff99aa;
}

</style>
<div id="overflow_hidden">
<p>超出范围的文本看不到</p>

<p>超出范围的文本看不到</p>

<p>超出范围的文本看不到</p>

<p>超出范围的文本看不到</p>

<p>超出范围的文本看不到</p>

<p>超出范围的文本看不到</p>
</div>

 

---

overflow: scroll

如果 overflow的值为scroll，如果内容超出父容器区域，那么在父容器会出现滚动条

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

滚动效果演示

overflow: scroll代码演示

可以尝试使用overflow-x\overflow-y分别设置

<style type="text/css">
  #overflow_scroll {
    background: #4CAF50;
    color: yellow;
    padding: 0px;
    width: 200px;
    height: 100px;
    overflow: scroll;
    border: 5px solid #ff99aa;
}
div.visible {
    padding: 4px;
    width: 250px;
    height: 100px;
    border: 1px dotted red;
}
</style>
<div id="overflow_scroll">
<div class="visible">
<p>这里的文本内容是可以滚动的。</p>

<p>这里的文本内容是可以滚动的。</p>

<p>这里的文本内容是可以滚动的。</p>

<p>这里的文本内容是可以滚动的。</p>

<p>这里的文本内容是可以滚动的。</p>

<p>这里的文本内容是可以滚动的。</p>
</div>