Twenty Twelve: Wrap Long Text and URLs In Article Content

[philiparthurmoore]

Long text and long URLs break the layout of Twenty Twelve in mobile view:

Any downside in applying the same break rules we use in .widget-area .widget to .site-content article?

	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;

[obenland]

Replying to philiparthurmoore:

Any downside in applying the same break rules we use in .widget-area .widget to .site-content article?

I don't think so. Do you want to add a patch?

[philiparthurmoore]

Twenty Twelve: break long text in articls

[georgestephanis]

I like it -- my only hesitancy is whether the properties are better placed at the bottom of the styling block as per ​http://make.wordpress.org/core/handbook/coding-standards/css/#property-ordering

[DrewAPicture]

root-relative

[DrewAPicture]

22359-root.diff​ regenerates break-long-text-in-articles.patch​ from the WP root.

[DrewAPicture]

On this ​test URL, 22359-root.diff​ works as expected for me on:

iPad IOS6

• Safari 6
• Chrome 21

Android

• Android browser 2.3
• Firefox 16

[lancewillett]

In 22576:

Twenty Twelve: wrap long text and URLs in entries. Props philiparthurmoore, fixes #22359. (Also clean up property order a bit.)

[lancewillett]

In 22577:

Twenty Twelve: revert accidental paste in r22576, see #22359.

[lancewillett]

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