CSS properties - white-space

revision:

white-space property

- specifies how white-space inside an element is handled.

CSS syntax : white-space: norma l |nowrap | pre | pre-line | pre-wrap | initial | inherit;

Property values:

normal : sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default

nowrap : sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

pre : whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML

pre-line : sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks

pre-wrap : whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.whiteSpace="nowrap"

example: white-space property

white-space: nowrap:

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

white-space: normal:

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

white-space: pre:

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

code: 
                    <div>
                        <h4>white-space: nowrap:</h4>
                        <p class="P-A">
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                        </p>
            
                        <h4>white-space: normal:</h4>
                        <p class="P-B">
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                        </p>
            
                        <h4>white-space: pre:</h4>
                        <p class="P-C">
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                            This is some text. This is some text. This is some text.
                        </p>
                    </div>
                    <style>
                        p.P-A {white-space: nowrap;}
                        p.P-B {white-space: normal;}
                        p.P-C {white-space: pre;}
                    </style>