WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#22751 closed defect (bug) (fixed)

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

Reported by: chellycat Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords:
Focuses: Cc:
PR Number:

Description

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 7 years ago.
22751.patch (467 bytes) - added by lancewillett 7 years ago.
ie9-urls.png (919.1 KB) - added by lancewillett 7 years ago.
22751.2.patch (509 bytes) - added by lancewillett 7 years ago.

Download all attachments as: .zip

Change History (11)

#1 @nacin
7 years ago

  • Version set to trunk

#2 @lancewillett
7 years ago

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

@lancewillett
7 years ago

@lancewillett
7 years ago

#3 @lancewillett
7 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
7 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
7 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
7 years ago

  • Keywords needs-testing removed

#7 @lancewillett
7 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 http://wordpress.org/support/topic/strange-word-breaks-in-posts-since-11-update?replies=8#post-3569034 and http://www.quirksmode.org/blog/archives/2012/11/hyphenation_wor.html

Note: See TracTickets for help on using tickets.