Which CSS white-space Property Values Don't Preserve New Lines?

Find out which CSS white-space property values do not preserve new lines

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:


Hope you found this post useful. It was published . Please show your love and support by sharing this post.