This following CSS white-space
property values do not preserve new lines (i.e. they're collapsed or removed):
normal
;nowrap
.
To demonstrate this, consider for example, the following:
<div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec justo cursus, hendrerit tortor non, consectetur nisl. Ut sollicitudin congue lorem quis egestas. Aenean tincidunt pharetra odio, a lacinia nulla semper quis.</span> </div>
div { background: lightgoldenrodyellow; overflow-x: auto; } span { background: lightpink; }
Based on the white-space
property value specified, this will produce the following output:
white-space : |
Example Output |
---|---|
normal |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec justo cursus, hendrerit tortor non, consectetur nisl. Ut sollicitudin congue lorem quis egestas.
Aenean tincidunt pharetra odio, a lacinia nulla semper quis.
|
nowrap |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec justo cursus, hendrerit tortor non, consectetur nisl. Ut sollicitudin congue lorem quis egestas.
Aenean tincidunt pharetra odio, a lacinia nulla semper quis.
|
From the examples above you can see that:
- New lines are not preserved (i.e. they are collapsed);
- Spaces and tabs are collapsed when
white-space
property value isnormal
ornowrap
; - Text wraps when
white-space
property value is set tonormal
; - Text does not wrap when
white-space
property value is set tonowrap
.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.