Block: Column - Add word-break CSS to allow wrapping of long lines

[eddhurst]

Description

As per #7921, this allows long-lines to break within columns.

To replicate: Create a columns area with single unbroken stream of letters. This wraps correctly in the back-end but unexpectedly pushes the second column out of bounds of the page whilst on the front-end.

How has this been tested?

I could replicate the fix on Chrome, Safari, Firefox and Chrome. IE11 seemingly never had the problem, Edge 16 and Edge 17 do.

To note - the break-word property is not supported on Edge. The suggested solution to use -ms-break-word: break-all; is a bad solution as it then breaks the entire word - which seems like an unexpected and bad user experience.

Screenshots

Types of changes

Single line change to style.scss of Columns block.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[eddhurst]

Amended initial PR to be cross-browser compatible. This now uses word-wrap instead of break-word which has better flexibility and more support across devices.