WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 6 months ago

#39121 new defect (bug)

Twenty Twelve: Tagcloud has tags hyphenated over line breaks

Reported by: xuhdev Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: Cc:
PR Number:

Description

I'm using theme TwentyTwelve and I observed that tagcloud has tags hyphenated over line breaks. I suggest to fix it by adding the following to the stylesheet:

.tagcloud {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

Maybe this can even be put somewhere that applies to all themes...

Attachments (5)

Screen Shot 2019-01-16 at 2.44.25 PM.png (44.9 KB) - added by laurelfulford 10 months ago.
Twenty Twelve - tag cloud with long tag hyphenated
39121.diff (535 bytes) - added by ianbelanger 6 months ago.
Removes hyphenation and changes word-wrap: break-word; to word-break: break-all; for complete browser support
39121-chrome-after-patch.PNG (18.5 KB) - added by ianbelanger 6 months ago.
Chrome after patch
39121-firefox-after-patch.PNG (19.3 KB) - added by ianbelanger 6 months ago.
Firefox after patch
39121-ie11-after-patch.PNG (14.5 KB) - added by ianbelanger 6 months ago.
IE11 after patch

Download all attachments as: .zip

Change History (9)

#1 @swissspidy
3 years ago

  • Component changed from Themes to Bundled Theme
  • Focuses ui removed
  • Version 4.6.1 deleted

#2 @SergeyBiryukov
3 years ago

  • Summary changed from Tagcloud has tags hyphenated over line breaks in TwentyTwelve to Twenty Twelve: Tagcloud has tags hyphenated over line breaks

@laurelfulford
10 months ago

Twenty Twelve - tag cloud with long tag hyphenated

#3 @laurelfulford
10 months ago

  • Keywords needs-patch has-screenshots added
  • Milestone changed from Awaiting Review to Future Release

Thanks for reporting this issue, @xuhdev!

I can recreate this issue -- oddly, the tag "this is a tag that is a long sentence not a word" gets hyphenated, breaking 'sentence' over two lines, but the tag "Loooooooooooooooooooong" just runs out of the content space (instead of breaking over two lines).

The culprit looks to be this CSS:

.widget-area .widget {
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

@ianbelanger
6 months ago

Removes hyphenation and changes word-wrap: break-word; to word-break: break-all; for complete browser support

@ianbelanger
6 months ago

Chrome after patch

@ianbelanger
6 months ago

Firefox after patch

@ianbelanger
6 months ago

IE11 after patch

#4 @ianbelanger
6 months ago

  • Keywords has-patch added; needs-patch removed

@laurelfulford could you check my patch in various browsers on a Mac? It works for all in Windows. Also, not sure if this is the approach we want to take. Would love to get your opinion on it. I like it because it allows for consistency across all browsers. I'm going to check this issue against the other Twenty Themes.

Note: See TracTickets for help on using tickets.