原始網址：http://www.w3schools.com/css/css_overflow.asp
翻譯：
CSS Layout - Overflow
CSS Overflow
當元素的內容太大而無法適應特定區域的時候，overflow 屬性用以指定是剪切內容還是增加滾動條。
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div {
background: #4caf50 none repeat scroll 0 0;
border: 1px solid #ccc;
color: white;
height: 100px;
overflow: scroll;
padding: 15px;
}
</style>
</head>
<body>
<div>This text is really long and the height of its container is
only 100 pixels. Therefore, a scrollbar is added to help the reader to
scroll the content. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem.</div>
</body>
</html>overflow 屬性有以下取值：
visible- 默認。溢出部分不會被剪切，它會在元素的盒子之外被渲染。hidden- 溢出部分會被剪切，內容的剩餘部分將不可見。scroll- 溢出部分會被剪切，但是，增加滾動條之後，內容的剩餘部分是可見的。auto- 如果溢出部分被剪切，滾動條將自動被添加以使內容的剩餘部分可見。
| 注意：overflow 屬性只作用於設置了特定高度的塊級元素。 |
Visible
默認情況下，overflow 屬性的值爲 visible，意味着溢出部分會在元素的盒子之外被渲染而不會被剪切：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box.</div>
</body>
</html>Hidden
使用 hidden 值，溢出部分會被剪切，內容的剩餘部分將被隱藏：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of
the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box.</div>
</body>
</html>Scroll
將值設置爲 scroll，溢出部分會被剪切，滾動條被添加在盒子內部進行滾動。注意：這種方式將在水平和垂直方向均添加滾動條（即使我們不需要）：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped
and a scrollbar is added to scroll inside the box. Note that this will
add a scrollbar both horizontally and vertically (even if you do not
need it):</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box.</div>
</body>
</html>Auto
auto 值和 scroll 值很相似，只有在必要的時候才增加滾動條：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>The auto value is similar to scroll, only it add scrollbars when
necessary:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box.</div>
</body>
</html>overflow-x 和 overflow-y
overflow-x 和 overflow-y 屬性指定是否只在水平或垂直方向（或兩者）變更內容的溢出部分：
overflow-x 指定內容的左/右邊界的處理。
overflow-y 指定內容的上/下邊界的處理。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
}
div.y {
overflow-x: hidden;
overflow-y: scroll;
}
div.x {
overflow-x: scroll;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>You can also change the overflow of content horizontally or
vertically.</p>
<p>
overflow-x specifies what to do with the left/right edges of the
content.<br> overflow-y specifies what to do with the top/bottom
edges of the content.
</p>
<div class="y">You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box.</div>
<hr>
<div class="x">10000000000000000000000000000000000000000000000000000000000</div>
</body>
</html>