This following CSS white-space property values don't wrap text:
nowrap— collapses spaces and tabs, and new lines, and does not wrap text on line-breaks;pre— preserves spaces and tabs, and new lines, and does not 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.