diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 30b83893..1a4876c6 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -21,6 +21,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org Set `$relative-font-sizing` to `false` to enable. * Vertical rhythm now has a minimum padding that defaults to 2px. This makes some edge cases look better. +* New mixin `force-wrap` prevents URLs and long lines of text from breaking layouts. 0.11.3 (06/11/2011) ------------------- diff --git a/doc-src/content/reference/compass/typography/text/force-wrap.haml b/doc-src/content/reference/compass/typography/text/force-wrap.haml new file mode 100644 index 00000000..01c747d2 --- /dev/null +++ b/doc-src/content/reference/compass/typography/text/force-wrap.haml @@ -0,0 +1,15 @@ +--- +title: Wrapping Long Text and URLs +crumb: Force Wrap +framework: compass +stylesheet: compass/typography/text/_force-wrap.scss +layout: core +meta_description: Wrap URLs and long lines of text. +classnames: + - reference + - core + - typography +--- +- render 'reference' do + %p + This mixin will wrap URLs and long lines of text to prevent text from breaking layouts. diff --git a/frameworks/compass/stylesheets/compass/typography/_text.scss b/frameworks/compass/stylesheets/compass/typography/_text.scss index 9cd3f0a1..885f729d 100644 --- a/frameworks/compass/stylesheets/compass/typography/_text.scss +++ b/frameworks/compass/stylesheets/compass/typography/_text.scss @@ -1,3 +1,4 @@ @import "text/ellipsis"; @import "text/nowrap"; @import "text/replacement"; +@import "text/force-wrap"; diff --git a/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss b/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss new file mode 100644 index 00000000..8a14e8f4 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss @@ -0,0 +1,12 @@ +// Prevent long urls and text from breaking layouts +// [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/) +@mixin force-wrap { + white-space: pre; // CSS 2.0 + white-space: pre-wrap; // CSS 2.1 + white-space: pre-line; // CSS 3.0 + white-space: -pre-wrap; // Opera 4-6 + white-space: -o-pre-wrap; // Opera 7 + white-space: -moz-pre-wrap; // Mozilla + white-space: -hp-pre-wrap; // HP Printers + word-wrap: break-word; // IE 5+ +} diff --git a/test/fixtures/stylesheets/compass/css/force-wrap.css b/test/fixtures/stylesheets/compass/css/force-wrap.css new file mode 100644 index 00000000..5eda4c31 --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/force-wrap.css @@ -0,0 +1,10 @@ +pre { + white-space: pre; /* CSS 2.0 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3.0 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + white-space: -moz-pre-wrap; /* Mozilla */ + white-space: -hp-pre-wrap; /* HP Printers */ + word-wrap: break-word; /* IE 5+ */ +} diff --git a/test/fixtures/stylesheets/compass/sass/force-wrap.scss b/test/fixtures/stylesheets/compass/sass/force-wrap.scss new file mode 100644 index 00000000..c71f28e6 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/force-wrap.scss @@ -0,0 +1,3 @@ +@import "compass/typography/text"; + +pre { @include force-wrap; }