CoderTools Web site

CSS Wrap - white-space

Description


Use the white-space property to change the way text is wrapped or not wrapped, to explicitly set how new lines in text are displayed and to set whether the formatting of text in the html document should remain when displayed in the browser (like the html pre tag).

Note: applies to text in block-level elements.

Default is normal

    white-space: none;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 2.1 */
    white-space: inherit;
    
See also: text-indent, text-align, text-decoration, text-transform.
HTML & CSS Editor with FTP / FTPS

Examples for white-space

Example 1:

An example showing normal and nowrap settings. The value nowrap tells the browser to keep all the text in one line:

This is text within cell 1 that is displayed with a white-space value of normal. This is text within cell 1 that is displayed with a white-space value of nowrap.
    <style>
        #table1 { width:50%; height:75px;  }
        #td1 { white-space: normal; width:50%; border:1px solid black; }
        #td2 { white-space: nowrap; width:50%; border:1px solid black; }
    </style>

    <table id="table1">
        <tr>
            <td id="td1">This is text within cell 1 that is displayed with a white-space value of normal.</td>
            <td id="td2">This is text within cell 1 that is displayed with a white-space value of nowrap.</td>
        </tr>
    </table>

Example 2:

This example shows the use of the value pre. Using this value you can make an html element behave like the html <pre> tag. This means that the browser will display the text with the same formatting that it has in the html file:

This example shows the use of the value pre. Using this value you can make an html element behave like the html pre tag.
    <style>
        #test2 { white-space: pre; }
    </style>

    <div id="test">
    This example shows the use of the value pre. 
    
    Using 
        this 
            value 
                 you can make 
            an 
        html 
    element 
        behave 
            like 
                the 
            html 
        pre
    tag.
    </div>

Values for white-space


Name Values Description
white-space normal
nowrap
pre
pre-wrap
pre-line
inherit
Use the white-space property to change the way text is wrapped or not wrapped, to explicitly set how new lines in text are displayed and to set whether the formatting of text in the html document should remain when displayed in the browser (like the html pre tag).


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

8/17/2017 5:53:28 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP