From 239e43b4e04ee28a59edfa4678c87d6076f85d1d Mon Sep 17 00:00:00 2001
From: Glenn McLelland <webmaster@mansfield-tx.gov>
Date: Fri, 25 Mar 2011 17:21:50 -0500
Subject: [PATCH] Added force-wrap mixin to prevent URLs and long lines of text
 from breaking layouts.

Closes GH-321
---
 doc-src/content/CHANGELOG.markdown                |  1 +
 .../compass/typography/text/force-wrap.haml       | 15 +++++++++++++++
 .../stylesheets/compass/typography/_text.scss     |  1 +
 .../compass/typography/text/_force-wrap.scss      | 12 ++++++++++++
 .../stylesheets/compass/css/force-wrap.css        | 10 ++++++++++
 .../stylesheets/compass/sass/force-wrap.scss      |  3 +++
 6 files changed, 42 insertions(+)
 create mode 100644 doc-src/content/reference/compass/typography/text/force-wrap.haml
 create mode 100644 frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss
 create mode 100644 test/fixtures/stylesheets/compass/css/force-wrap.css
 create mode 100644 test/fixtures/stylesheets/compass/sass/force-wrap.scss

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