Added force-wrap mixin to prevent URLs and long lines of text from breaking layouts.

Closes GH-321

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

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.

frameworks/compass/stylesheets/compass/typography/_text.scss

@@ -1,3 +1,4 @@
 @import "text/ellipsis";
 @import "text/nowrap";
 @import "text/replacement";
+@import "text/force-wrap";

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+
+}

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+ */
+}

test/fixtures/stylesheets/compass/sass/force-wrap.scss

@@ -0,0 +1,3 @@
+@import "compass/typography/text";
+
+pre { @include force-wrap; }