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-spaceproperty value isnormalornowrap; - Text wraps when
white-spaceproperty value is set tonormal; - Text does not wrap when
white-spaceproperty 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.