Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#21503 closed defect (bug) (fixed)

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

Reported by: drewapicture's profile DrewAPicture Owned by: lancewillett's profile 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 12 years ago.
21503.2.diff (491 bytes) - added by DrewAPicture 12 years ago.
vendor prefixes + word-break
21503.2.2.diff (488 bytes) - added by DrewAPicture 12 years ago.
vendor prefixes + word-break
21503.3.diff (773 bytes) - added by obenland 12 years ago.
21503.firefox.png (13.6 KB) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (17)

@DrewAPicture
12 years ago

#2 @lancewillett
12 years ago

  • Milestone changed from Awaiting Review to 3.5

#3 follow-up: @lancewillett
12 years ago

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

@DrewAPicture
12 years ago

vendor prefixes + word-break

#4 in reply to: ↑ 3 @DrewAPicture
12 years 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 12 years ago by DrewAPicture (previous) (diff)

@DrewAPicture
12 years ago

vendor prefixes + word-break

#5 @lancewillett
12 years 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.

#6 @obenland
12 years 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.

@obenland
12 years ago

#7 @lancewillett
12 years 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.

#8 follow-up: @lancewillett
12 years 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 12 years ago by lancewillett (previous) (diff)

#10 in reply to: ↑ 8 @SergeyBiryukov
12 years ago

Replying to lancewillett:

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

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

Version 0, edited 12 years ago by SergeyBiryukov (next)

#11 @lancewillett
12 years 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.

#12 @lancewillett
11 years 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.