Which CSS white-space Property Values Wrap Text?

This following CSS white-space property values wrap text:

• normal — text wraps when necessary;
• pre-wrap — preserves 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:

From the examples above you can see that:

• Text wraps;
  • Except on preserved spaces and tabs when using pre-wrap;
  • Including on preserved spaces and tabs when (the opportunity exists) using break-spaces.
• New lines are collapsed when white-space property value is normal;
• Spaces and tabs are collapsed when white-space property value is normal or pre-line;
• Spaces and tabs are preserved in case of pre-wrap and break-spaces.