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.