Twenty Twelve: Tagcloud has tags hyphenated over line breaks

[xuhdev]

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...

[laurelfulford]

Twenty Twelve - tag cloud with long tag hyphenated

[laurelfulford]

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]

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

[ianbelanger]

Chrome after patch

[ianbelanger]

Firefox after patch

[ianbelanger]

IE11 after patch

[ianbelanger]

@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.