Gutenberg: Columns Block (beta): long content in doesn't wrap and pushes editor off page

[maddisondesigns]

Describe the bug
Adding in long amounts of text pushes the whole editor off the edge of the page.

To Reproduce
Steps to reproduce the behavior:

1. Add column Block
2. Add some text to one column
3. Add text without spaces to another column

Expected behavior
Content should wrap

_macOS Sierra 10.12.1
Firefox Quantum 61.0.1 (64-bit)
Gutenberg 3.2.0_

[designsimply]

Tested and confirmed using WordPress 4.9.7 and Gutenberg 3.2.0 on Firefox 61.0.1 on macOS 10.13.5.

[maddisondesigns]

This also breaks the front-end as well and causes horizontal scrolling.

You need to add word-break: break-all; on .wp-block-column

[eddhurst]

Testing this on 3.9 - I think the back-end issue here has been resolved somewhere along the line.

The front end issue however has not been resolved.

[ZebulanStanphill]

I can still reproduce this issue in master. (Tested in Firefox Beta.)

[maddisondesigns]

Can confirm, yep, this is still an issue on the front-end and back-end.

Back-end vid: https://cl.ly/c7e79cefe9c6

Front-end vid: https://cl.ly/bbc80ba11159

[maddisondesigns]

@eddhurst Not sure why you would do word-break: break-word;. The allowable values for word-break are normal | keep-all | break-all.

https://www.w3.org/TR/css-text-3/#word-break-property

[eddhurst]

@maddisondesigns That is true, but word-break: break-all; is definitely not the expected behaviour of text within a column - and aggressively breaks words, even if they would otherwise wrap.

break-word is unofficial, but supported by Chrome, Safari and other WebKit/Blink browsers: https://caniuse.com/#search=word-break

Edit - strike that, I stupidly thought Firefox was in that list as well, sorry about that. The issue with break-all is that is ends up looking like this:

break-word

break-all

[eddhurst]

I have updated the initial PR, which correctly fixes this issue. I realised that word-break: break-word is effectively just treated as word-wrap: break-word

word-wrap has much better browser support and is understood by FF, IE and Edge.

[eddhurst]

This appears to have been fixed in the last few updates to columns

[ajtruckle]

I have issues. See: https://wordpress.org/support/topic/word-wrapping-in-column-2-of-internet-explorer-microsoft-edge/

[designsimply]

I replied to your forum post with the results of a test I ran.