Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#22751 closed defect (bug) (fixed)

Twenty Eleven: Words Break at Line Endings in Nested Comments in Firefox and IE

Reported by: chellycat's profile chellycat Owned by: lancewillett's profile lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords:
Focuses: Cc:


Longer words in nested comments are breaking at the ends of lines in Firefox and IE. Steps to reproduce:

  1. Activate Twenty Eleven on a test blog
  2. Create a nested comment that's long enough to have multiple lines. Use this example text if you'd like: "Replying to this comment and want to see if the words will break. Momentarily waiting to see if words will break in wrong places and be moved continuously to a new line."
  3. View the comment on the blog and observe how the words break strangely, without hyphens.

In r21487 (the fix for #21491), the following was added to Twenty Eleven:

 .commentlist .children li.comment .comment-content {
    margin: 1.625em 0 0; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto;

The "word-break: break-all" and "-ms-word-break: break-all" rules are causing longer words to break without hyphens. Please see attached screenshot for an example. This problem occurs in Firefox and IE9. Safari and Chrome both show hyphens.

What do you think about removing those two rules? Removing them allows the words to break with hyphens.

Attachments (4)

Screen Shot 2012-12-04 at 5.47.09 PM.png (77.9 KB) - added by chellycat 11 years ago.
22751.patch (467 bytes) - added by lancewillett 11 years ago.
ie9-urls.png (919.1 KB) - added by lancewillett 11 years ago.
22751.2.patch (509 bytes) - added by lancewillett 11 years ago.

Download all attachments as: .zip

Change History (11)

#1 @nacin
11 years ago

  • Version set to trunk

#2 @lancewillett
11 years ago

@chellycat Did you test out removing the two lines with super long URLs like in #21491?

11 years ago

#3 @lancewillett
11 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 3.5

Unfortunately the proposed fix breaks long URLs in IE9 and earlier. Not sure it's worth a trade-off. Testing out some more ...

#4 @lancewillett
11 years ago

word-break property was the culprit. 22751.2.patch should work with both long URLs and natural word breaks in all browsers.

#5 @lancewillett
11 years ago

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

In 23060:

Twenty Eleven: remove buggy word-break property, use word-wrap instead, for better hyphenation and word breaking in nested comments. Fixes #22751.

#6 @lancewillett
11 years ago

  • Keywords needs-testing removed

#7 @lancewillett
10 years ago

Noting for future reference, in order for CSS hyphenation to work correctly the blog's language must be set to match the post or page content. (US English = "en-US" for example.)

See notes in and

Note: See TracTickets for help on using tickets.