Break long words in sidebar widgets for Twenty Ten and Twenty Eleven

[sennza]

The Monster widget adds lots of awesome widgets in one and is fantastic for theme testing. Whilst working on a theme at the moment I realised that both Twenty Eleven and Twenty Ten haven't factored in the the 'Pipe Test' which is part of the monster widget.

I have attached screenshots and hopefully my first patch ever :)

[kawauso]

Tabs, not spaces, in patches please. </pedant>

[georgestephanis]

Not entirely sure if this would be intended usage ... some people may prefer things to overflow the box rather than unintended ambiguity over line breaks assigned by css in the middle of a word.

[sennza]

Sorry @kawauso I was well aware of the 'tabs not spaces' policy and had used a tab in my IDE. Unfortunately I wasn't aware that PhpStorm changed those from tabs to spaces without me knowing I've flicked the setting for next time. Damn IDEs :)

Interesting feedback @georgestephanis. It'll be fun to see what others think. This patching thing is fun already!

[SergeyBiryukov]

FWIW, we already use break-word for several things in the admin (#6036, #9283, #13574, #17424).

[obenland]

Fixed for Twenty Twelve in [21336].

[SergeyBiryukov]

Related: #21491

[DrewAPicture]

Per @lancewillett: created #21503 to add word-wrap for breaking long words in Twenty Twelve.

[lancewillett]

The best fix is a bit more verbose and also adds support for hyphenation in modern browsers. From ​http://html5please.com/#hyphens Paul Irish explains:

CSS Text Level 3 allows you to tell the browser to break words using hyphens. Read about how to effectively use hyphens:auto and word-break in Word wrapping/hyphenation using CSS.

As there won't by any noticable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks. CSS Hyphenator is a polyfill that works on browsers that support the soft hyphen. Modernizr has good support for hyphentation detection.

See a detailed explanation at ​http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/.

CSS to be implemented:

	-ms-word-break: break-all;
    word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;

Props iandstewart for the Paul Irish pointer.

[obenland]

21151.2.diff​ adds support for hyphenation and takes learnings from #21503 into consideration. Also improves image resizing for images in widgets.

[DrewAPicture]

21151.2.diff​ works for me.

[lancewillett]

In [22195]:

Twenty Ten and Eleven: more elegant fix for long word overflow in sidebars. Also improves image resizing for images in widgets in Twenty Ten. Props obenland, fixes #21151; see #21503 also.