Which CSS white-space Property Values Don't Wrap Text?

This following CSS white-space property values don't wrap text:

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
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.
pre
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.

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.