New line in text inside div

Question

In a textarea, there are new lines using for example , but how can I do this to a div element without using htmll (plain text like \n) ?

`\n` || `\r` || `"\n"` || `"\r"` – SpYk3HH Jul 25 '14 at 20:19 — SpYk3HH, Jul 25 '14 at 20:19
It doesn't work inside a div element. – user3681138 Jul 25 '14 at 20:20 — user3681138, Jul 25 '14 at 20:20

score 83 · Accepted Answer · answered Jul 25 '14 at 20:32

83

You can use CSS to force HTML to recognize new lines as line breaks.

Just set the white-space property to pre:

div {
    white-space: pre;
}

answered Jul 25 '14 at 20:32

AstroCB

Which browsers support this. – basickarl Dec 22 '15 at 08:05
1

All of them, all the way back to IE6. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility – mrdommyg Jul 06 '16 at 19:38
3

Excellent fix for when taking text value from a text-area and applying to a div. Extra credit: use pre-wrap to allow word-break property work as needed (IE8+) – Mark Sep 01 '16 at 22:45
I had to use white-space: pre-wrap to make it work properly on Chrome – hriziya May 27 '17 at 13:00
7

Or you can use `pre-wrap` https://www.w3schools.com/cssref/pr_text_white-space.asp – onmyway133 Jul 07 '17 at 08:15
This is. what I'm looking for. Thanks. – Hardik Jul 11 '17 at 07:45
pre-wrap and break-spaces also worked for me. For white-space – SeanMC Feb 04 '21 at 02:26

1 Answers1