1500258 - word-wrap: break-word doesn't break long strings

Status: RESOLVED DUPLICATE of bug 1472386

(Core :: Layout: Grid, defect)

Description

[Mark Striemer [:mstriemer]]

Attachment: Screenshot 2018-10-18 16.45.10.png

If you have a long string in a grid and it should break mid-word to keep from growing outside of its container the word will continue on the same line but the height will be added for it to wrap.

Attached is a picture of my test case in Chrome (left) and Firefox (right).

Here's the code: https://codepen.io/mkstrmr/pen/YJLyRO. There's a basic case at the top and what I noticed this with underneath.

Comment 1

[Daniel Holbert [:dholbert]]

The problem you're actually running into is that the .name element (the one with `word-wrap`) is wider than you're expecting.  And it's wide enough that it doesn't *need* to break any words.

Here's a modified codepen where I've given it a border to show you how wide it is:
 https://codepen.io/dholbert/pen/LgmGNg

If you give .name "max-width:100%;" or "width:100%", or "min-width:0", that'll fix the problem:
 https://codepen.io/dholbert/pen/bmMEwE

Having said that: *the fact that .name (a grid item) is ending up this wide by default* is a bug, and we've already fixed it, but it apparently had to be preffed off (behind layout.css.overflow-break.intrinsic-size)  So this is basically a dupe of bug 1472386, though note that the fix is disabled at the moment.

Comment 2

[Daniel Holbert [:dholbert]]

(And apparently the reason it's preffed off is beacuse it caused web-compatibility regressions like bug 1479302.)