Add Make A Block Of Text Respect New Lines as a css til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_717 TILs and counting..._
+_718 TILs and counting..._
 
 ---
 
@@ -94,6 +94,7 @@ _717 TILs and counting..._
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
+- [Make A Block Of Text Respect New Lines](css/make-a-block-of-text-respect-new-lines.md)
 - [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
 
 ### Devops

css/make-a-block-of-text-respect-new-lines.md

@@ -0,0 +1,23 @@
+# Make A Block Of Text Respect New Lines
+
+Generally when we fill a `div` tag full of text, it will display it one long
+strand irrespective of any line breaks that are included. This is a great
+default, but not necessarily what we want when we are displaying text from
+another source, such as our users.
+
+We can convince a block of text to respect new lines by adding a couple CSS
+properties.
+
+```css
+.multiline-text {
+  word-wrap: break-word;
+  white-space: pre-line;
+}
+```
+
+The first rule, `word-wrap: break-word`, ensures that long lines of text
+uninterrupted by new lines respect the boundaries of our wrapping element.
+The second rule, `white-space: pre-line`, handles squashing of extra white
+space and respecting of new lines.
+
+See a [working example here](https://codepen.io/anon/pen/bQpKyv).