HTML - символ новой строки в редактируемом контенте DIV?

Question

Я храню контент в базе данных, например:

Hello
This
is 
Text

и когда я передаю это текстовой области, она остается с новой строкой. Но если я передам этот текст в div с редактируемым содержимым, он останется так:

Hello This is Text

Как я могу исправить эту проблему?

Answer 1

Установите стиль на div: white-space: pre или же white-space: pre-wrap

Пример: http://jsfiddle.net/fPv6S/

Answer 2

Чтобы добавить некоторую информацию о Explosion Pills, правильный ответ и извлечь некоторую информацию из MDN:

CSS white-space Атрибут есть, чтобы помочь:

до:

white-space: pre

Последовательности пробелов сохраняются. Строки разбиваются только на символах новой строки в источнике и на <br> элементы.

Это может привести к нежелательным горизонтальным полосам прокрутки, как показано в примере!

предварительно компресс:

white-space: pre-wrap

Последовательности пробелов сохраняются. Строки ломаются у символов новой строки, при <br> и по мере необходимости заполнять строки ящиков.

Как указывало ceremcem, разрывы строк в конце поля не будут передаваться при вставке текста, что имеет смысл, поскольку эти разрывы строк являются не частью форматирования текста, а скорее визуальным отображением.

до линии:

white-space: pre-line

Последовательности пустого пространства свернуты. Строки ломаются у символов новой строки, при <br> и по мере необходимости заполнять строки ящиков.

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>

РЕДАКТИРОВАТЬ 14/08/2018:

В Chrome у вас могут возникнуть проблемы: нажатие клавиши Enter приведет к созданию нового <div> внутри вашего contenteditable. Чтобы предотвратить это, вы можете нажать Shift + Enter или установить display: inline к удовлетворению <div> как видно на скрипке.

Answer 3

Попробуй это......

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,"");

Это сделает это...

Answer 4

Вы можете искать и заменять новые строки <br />, http://jsfiddle.net/fPv6S/1/