diff --git a/README.md b/README.md index 2c51fa3..e4d0a40 100644 --- a/README.md +++ b/README.md @@ -494,6 +494,7 @@ Typography * [@base-font-size](#setting-base-font-size) * [.font-size-ems()](#font-size-ems) * [.font-size-rems()](#font-size-rems) +* [.word-wrap()](#word-wrap) ### SETTING: @base-font-size @@ -578,6 +579,30 @@ Future versions of this may include workarounds to make this more flexible. } ``` +### .word-wrap() + +Implement word-wrapping for text within the element, with hyphenation where supported. See [http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/](Kenneth Auchenberg's blog post) for details. + +```css +.word-wrap(); +``` + +```css +/* Usage: */ +.example { + .word-wrap(); +} +/* Example output: */ +.example { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} +``` + Sprites ------- diff --git a/mixins/typography.less b/mixins/typography.less index f1fa109..c3946bb 100644 --- a/mixins/typography.less +++ b/mixins/typography.less @@ -37,3 +37,11 @@ } } +.wrap-words() { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} \ No newline at end of file