Added text-wrap

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 6d06948291c4738f487be7c24f90ee8bf803c255..d460883bccc69b78fc890e88aab7871009c2f961 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -409,10 +409,20 @@ The `text-truncate` displays an elipsis when the text must be in a single straig
 
 ---
 
-## Text Nowrap
+## Text Wrapping
 
-If you would like to prevent the text wrapping into the next line you can utilize `text-nowrap`. The sequences of whitespace will collapse into a single whitespace and text will wrap into the next line. Please note that the text will continue to be in same line unless the `<br/>` tag is used.
+#### Text No-wrap
+
+If you would like to prevent the text wrapping into the next line you can utilize `text-nowrap`. Please note that the text will continue to be in same line unless the `<br/>` tag is used.
 
 ```html
 <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
 ``` 
+
+#### Text Wrap
+
+Oppositely, if you are looking for text wrapping into the next line, you can use `text-wrap`.
+
+```html
+<p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+``` 

diff --git a/scss/prototype/_text-utilities.scss b/scss/prototype/_text-utilities.scss
index 2f8df92e442aeb512c2dfd96eac4c20091e9d556..074aa6e268e0f00a042870f507f636d11baadd28 100644 (file)
--- a/scss/prototype/_text-utilities.scss
+++ b/scss/prototype/_text-utilities.scss
@@ -34,6 +34,10 @@ $prototype-text-overflow: ellipsis !default;
   white-space: nowrap;
 }
 
+@mixin text-wrap {
+  word-wrap: break-word;
+}
+
 @mixin foundation-prototype-text-utilities {
   .text-hide {
     @include text-hide;
@@ -47,6 +51,10 @@ $prototype-text-overflow: ellipsis !default;
     @include text-nowrap;
   }
 
+  .text-wrap {
+    @include text-wrap;
+  }
+
   @if ($prototype-utilities-breakpoints) {
     // Loop through Responsive Breakpoints
     @each $size in $breakpoint-classes {
@@ -63,6 +71,10 @@ $prototype-text-overflow: ellipsis !default;
           .#{$size}-text-nowrap {
             @include text-nowrap;
           }
+
+          .#{$size}-text-wrap {
+            @include text-wrap;
+          }
         }
       }
     }