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>
Click to view the demo

The overflow behavior is controled by the overflow properties:

PropertyDescription
overflow-xSet the horizontal or vertical overflow style.
overflow-ySet the horizontal or vertical overflow style.
overflowShorthand property.

The following table shows the allowed values for overflow-x,overflow-y.

ValueDescription
autobrowser decide what to do.
hiddenThe content is clipped.
scrollThe browser will add a scrollbar. The scrollbar will be visible even if the content doesn't overflow.
visibleThis 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>
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: