Twenty Twelve: Long words still getting hidden in overflow in widgets

[DrewAPicture]

Related #21151

URLs are fine but long words are extending into the hidden overflow in widgets.

Patch attached.

[DrewAPicture]

Overflow hidden: ​http://cl.ly/image/220P1y1f0m3u

With word-wrap: ​http://cl.ly/image/2D0L1o3Y2n0W

[lancewillett]

See notes in ​http://core.trac.wordpress.org/ticket/21151#comment:16 for the better CSS rules to fix this.

[DrewAPicture]

vendor prefixes + word-break

[DrewAPicture]

Replying to lancewillett:

See notes in ​http://core.trac.wordpress.org/ticket/21151#comment:16 for the better CSS rules to fix this.

21503.2.2.diff​ adds the rules suggested in the blog post and #21151. According to ​s comment on that post, word-break doesn't work on long letter runs, e.g. 'eeeeeeeee' in Firefox 13 & 14 without word-wrap but I'd consider even having long letter runs like that an edge case so I left it out.

[DrewAPicture]

vendor prefixes + word-break

[lancewillett]

In [21477]:

Twenty Twelve: fix for long words getting hidden in widgets. Props DrewAPicture, closes #21503.

[obenland]

[21477] works for the sidebar, it doesn't work for the homepage template though. 21503.3.diff​ moves the logic to a widget specific selector.

[lancewillett]

In [21517]:

Twenty Twelve: better fix for long words getting hidden in widgets, putting the rules in the correct selector, props obenland. Closes #21503.

[lancewillett]

Getting some reports from WP.com customers about IE9 and sidebar text not breaking at word level, it breaks in the middle of words and makes it really hard to read.

We should relook at our hyphenation on .widget-area .widget and maybe consider adding a rule just for IE9, using the alternate word-wrap: break-word; instead.

Or ... decide that really long URLs breaking the sidebar is an acceptable edge case. I'd rather have the long URL breakage versus normal text not reading nicely, which is much more common.

To repeat:

1. Make a text widget with a paragraph of normal text, and also a long URL.
2. View in IE9.

Live example is ​http://paolobelcastro.com/ — see the Welcome widget text in IE9. Screenshot: ​http://cl.ly/image/2V36021l3Z0L.

[lancewillett]

See also #21151.

[SergeyBiryukov]

Replying to lancewillett:

Live example is ​http://paolobelcastro.com/ — see the Welcome widget text in IE9.

In Firefox 15 and IE 8, some breaking looks out of place as well (21503.firefox.png​).

[lancewillett]

In [21720]:

Twenty Twelve: fix long word overflow in IE9 and FF15 by using word-wrap instead of word-break, fixes #21503.

[lancewillett]

In [22195]:

Twenty Ten and Eleven: more elegant fix for long word overflow in sidebars. Also improves image resizing for images in widgets in Twenty Ten. Props obenland, fixes #21151; see #21503 also.