WordPress.org

Make WordPress Core

Opened 21 months ago

Closed 20 months ago

Last modified 18 months ago

#21503 closed defect (bug) (fixed)

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

Reported by: DrewAPicture Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing needs-refresh
Focuses: Cc:

Description

Related #21151

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

Patch attached.

Attachments (5)

21503.diff (368 bytes) - added by DrewAPicture 21 months ago.
21503.2.diff (491 bytes) - added by DrewAPicture 21 months ago.
vendor prefixes + word-break
21503.2.2.diff (488 bytes) - added by DrewAPicture 21 months ago.
vendor prefixes + word-break
21503.3.diff (773 bytes) - added by obenland 21 months ago.
21503.firefox.png (13.6 KB) - added by SergeyBiryukov 20 months ago.

Download all attachments as: .zip

Change History (17)

DrewAPicture21 months ago

comment:2 lancewillett21 months ago

  • Milestone changed from Awaiting Review to 3.5

comment:3 follow-up: lancewillett21 months ago

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

DrewAPicture21 months ago

vendor prefixes + word-break

comment:4 in reply to: ↑ 3 DrewAPicture21 months ago

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.

Last edited 21 months ago by DrewAPicture (previous) (diff)

DrewAPicture21 months ago

vendor prefixes + word-break

comment:5 lancewillett21 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In [21477]:

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

comment:6 obenland21 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

[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.

obenland21 months ago

comment:7 lancewillett20 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [21517]:

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

comment:8 follow-up: lancewillett20 months ago

  • Keywords needs-testing needs-refresh added
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

Last edited 20 months ago by lancewillett (previous) (diff)

comment:10 in reply to: ↑ 8 SergeyBiryukov20 months ago

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).

Last edited 20 months ago by SergeyBiryukov (previous) (diff)

comment:11 lancewillett20 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [21720]:

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

comment:12 lancewillett18 months ago

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.

Note: See TracTickets for help on using tickets.