Which CSS white-space Property Values Wrap Text?

Find out which CSS white-space property values wrap text

This following CSS white-space property values wrap text:

  • normal — text wraps when necessary;
  • pre-wrappreserves spaces and tabs and wraps text when necessary, and on line-breaks;
  • pre-line — text wraps when necessary, and on line-breaks;
  • break-spaces — similar to pre-wrap except that text wrapping opportunity exists after every preserved whitespace character (including between whitespace characters).

These CSS properties wrap text to a new line at soft-wrap opportunities. 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; }
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.
pre-wrap
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-line
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.
break-spaces
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.