Dealing with Overflowing Content
The following HTML document uses the default value to handle overflow.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The overflow behavior is controled by the overflow properties:
Property | Description |
---|---|
overflow-x | Set the horizontal or vertical overflow style. |
overflow-y | Set the horizontal or vertical overflow style. |
overflow | Shorthand property. |
The following table shows the allowed values for overflow-x,overflow-y.
Value | Description |
---|---|
auto | browser decide what to do. |
hidden | The content is clipped. |
scroll | The browser will add a scrollbar. The scrollbar will be visible even if the content doesn't overflow. |
visible | This is the default value. The element's content is displayed, even though it overflows the content box. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
width: 200px;
height: 100px;
border: medium double black;
}
#first {overflow: hidden;}
#second { overflow: scroll;}
</style>
</head>
<body>
<p id="first">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p id="second">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>