mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 23:28:02 +00:00
24 lines
800 B
Markdown
24 lines
800 B
Markdown
# 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).
|