Which CSS white-space Property Values Don't 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:


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.