Forcewrapmixin

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 @@
+// used to prevent long urls and text from breaking layouts
+// idea from 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; }