HTML - Newline char in DIV content editable?

Question

I am storing content in the database, for example:

Hello
This
is 
Text

and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:

Hello This is Text

How can I fix this problem?

Thanks for this question. I was tired of banging my head around but could not find a solution for this. — Aosis, Jan 08 '19 at 06:54
[Prevent contenteditable adding
on ENTER - Chrome](https://stackoverflow.com/q/18552336/104380) — vsync, Sep 10 '21 at 16:09

score 151 · Answer 1 · answered Sep 26 '13 at 20:29

151

Set a style on the div: white-space: pre or white-space: pre-wrap

Example: http://jsfiddle.net/fPv6S/

answered Sep 26 '13 at 20:29

Explosion Pills

188,624
52
326
405

9

This answer deserves so many more thumb-ups. If anybody needs info on `white-space` (I personally went with `pre-wrap`): https://developer.mozilla.org/en-US/docs/Web/CSS/white-space – pilau May 03 '14 at 16:51
2

or even `white-space:pre-line` – Reza Jul 25 '14 at 13:31
This style makes div output newlines as newlines, but if you copy and paste the `contenteditable` area, the newlines are ignored. – ceremcem Oct 09 '15 at 03:00
15

this question is about contenteditable, not about textarea – Roma Rush Nov 04 '15 at 16:24
2

It doesn't work in chrome on android for some reason? is this a bug? I think chrome creates divs to make new lines :( – REJH Jan 12 '17 at 17:08
I tried `word-wrap: break-word;` but `white-space: pre` works for me – onmyway133 Jun 15 '17 at 13:23
3

The question says contenteditable, your fiddle uses textarea, they are completely different - this answer should be ignored. – user2677034 Jun 29 '20 at 17:15
Don't be dismayed by the inapplicable fiddle. The solution suggested works for editable elements. `pre` preserves the line breaks and indentation but it doesn't wrap. `pre-line` preserves the line breaks but not the indentation, and it wraps. `pre-wrap` preserves the line breaks and the indentation, and it wraps. – Luther Jul 03 '21 at 08:41
@user2677034 the textarea is just so you can update the contents of the div. – Explosion Pills Jul 07 '21 at 13:52
2

@Explosion Pills - I fully understand that, I repeat: this question is about contenteditable, not about textarea. – user2677034 Jul 07 '21 at 18:07

Sebbas · Answer 2 · 2018-08-14T10:04:47.020

To add some info on @Explosion Pills correct answer and extract some info from MDN:

The CSS white-space attribute is there to help:

pre:

white-space: pre

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.

This might result in unwanted horizontal scrollbars as shown in the example!

pre-wrap:

white-space: pre-wrap

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

As @ceremcem pointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.

pre-line:

white-space: pre-line

Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}

<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

EDIT 08/14/2018:

In Chrome you might experience troubles: Pressing Enter will generate a new <div> inside your contenteditable. To prevent that you can either press Shift+Enter or set display: inline to the contenteditable <div> as seen in the fiddle.

the white-space: pre-line fixed an issue for me that ONLY happened when pasting from clipboard in chrome. It was only adding divs in that case, pressing shift + enter or enter was adding lines
as as expected. Thank you for the answer. — geilt, May 05 '22 at 05:37
Really great answer. I hope SO never dies. Answers like this make humans hard to replace. — Andy Hoffman, May 27 '23 at 04:41

score 5 · Answer 3 · answered Feb 24 '18 at 06:34

5

Try this......

var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");

That will do it...

answered Feb 24 '18 at 06:34

Subham Debnath

689
8
9

score 1 · Answer 4 · answered Sep 26 '13 at 20:32

1

You could search and replace newlines with <br />. http://jsfiddle.net/fPv6S/1/

answered Sep 26 '13 at 20:32

andi

6,442
1
18
43

HTML - Newline char in DIV content editable?

4 Answers4

pre:

pre-wrap:

pre-line:

EDIT 08/14/2018:

Linked

Related