diff --git a/README.md b/README.md index 46b5f92..5751fff 100644 --- a/README.md +++ b/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 diff --git a/css/make-a-block-of-text-respect-new-lines.md b/css/make-a-block-of-text-respect-new-lines.md new file mode 100644 index 0000000..1ed6e3b --- /dev/null +++ b/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).