Whitespace

Whitespace is usually collapsed or ignored in HTML.

Collapsed means that they are replaced with a single space character. Line breaks are ignored and the browser wraps the text.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            #id1 { 
                width: 400px; 
                margin: 5px; 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgrey; 
            } 
        </style> 
    </head> 
    <body> 
        <p id="id1"> 
            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

You can control the handling of white space characters with the whitespace property. The allowed values for the whitespace property are described in the following table:

ValueDescription
normaldefault. Whitespace is collapsed, and lines are wrapped.
nowrapWhitespace is collapsed, but lines are not wrapped.
preWhitespace is preserved, and text will wrap only on line breaks.
pre-lineWhitespace is collapsed, and text will wrap to make lines fit or when a line break is encountered.
pre-wrapWhitespace is preserved, and text will wrap to make lines fit or when a line break is encountered.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            #myID { 
                width: 400px; 
                margin: 5px; 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgrey; 
                white-space: pre-line; 
            } 
        </style> 
    </head> 
    <body> 
        <p id="myID"> 
            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
Home 
  HTML CSS Book 
    CSS  

Related: