WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years 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 3 years ago.
21503.2.diff (491 bytes) - added by DrewAPicture 3 years ago.
vendor prefixes + word-break
21503.2.2.diff (488 bytes) - added by DrewAPicture 3 years ago.
vendor prefixes + word-break
21503.3.diff (773 bytes) - added by obenland 3 years ago.
21503.firefox.png (13.6 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (17)

@DrewAPicture3 years ago

comment:2 @lancewillett3 years ago

  • Milestone changed from Awaiting Review to 3.5

comment:3 follow-up: @lancewillett3 years ago

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

@DrewAPicture3 years ago

vendor prefixes + word-break

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

@DrewAPicture3 years ago

vendor prefixes + word-break

comment:5 @lancewillett3 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.

comment:6 @obenland3 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.

@obenland3 years ago

comment:7 @lancewillett3 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.

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

comment:10 in reply to: ↑ 8 @SergeyBiryukov2 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 2 years ago by SergeyBiryukov (next)

comment:11 @lancewillett2 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.

comment:12 @lancewillett2 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.