многострочные значения отображаются в одной строке в теге div в html

-4

У меня есть многострочное текстовое содержимое, которое я хочу отображать в теге div. Для этого я использую javascript для передачи содержимого в тег div, как показано ниже

function MyFunction(){
document.getElementById("get").innerHTML = document.getElementById("pass").value;
}
#get{
height : 50px;
width : 200px;
border:1px solid;
overflow : auto;
border-color:rgb(204, 204, 204);
}
<div id="get" style="border:1px solid" contenteditable="true">

</div>

<br>
<button onclick="MyFunction()">Fetch</button><br>
<br>
<textarea id="pass">
Hello
How are You
</textarea>

Но содержимое в textarea является многострочным текстом. но он отображается как одна строка в теге html div, как показано в приведенном выше фрагменте i, e Привет в одной строке и как вы находитесь в другой строке, но в теге div оба они отображаются в одной строке.

спросил(а) 2017-11-05T10:19:00+03:00 2 года, 3 месяца назад
0
72

Простое решение использует следующий CSS:

white-space: pre-wrap;

Согласно MDN, используя pre-wrap...

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

Вы также можете использовать white-space: pre; ,

Вот ваш код с этим изменением:

function MyFunction(){
document.getElementById("get").innerHTML = document.getElementById("pass").value;
}
#get{
height : 50px;
width : 200px;
border:1px solid;
overflow : auto;
border-color:rgb(204, 204, 204);
white-space: pre-wrap;
}
<div id="get" style="border:1px solid" contenteditable="true">

</div>

<br>
<button onclick="MyFunction()">Fetch</button><br>
<br>
<textarea id="pass">
Hello
How are You
</textarea>

ответил(а) 2017-11-05T10:24:00+03:00 2 года, 3 месяца назад
49

Ты можешь использовать

 <pre></pre> 

function MyFunction(){
document.getElementById("get").innerHTML = document.getElementById("pass").value;
}
#get{
height : 50px;
width : 200px;
border:1px solid;
overflow : auto;
border-color:rgb(204, 204, 204);
}
<pre id="get" style="border:1px solid" contenteditable="true">

</pre>

<br>
<button onclick="MyFunction()">Fetch</button><br>
<br>
<textarea id="pass">
Hello
How are You
</textarea>

ответил(а) 2017-11-05T10:30:00+03:00 2 года, 3 месяца назад
49

Изменена функция js.

function MyFunction(){
var data = document.getElementById("pass").value.replace('\n', '<br>');
document.getElementById("get").innerHTML = data;
}
#get{
height : 50px;
width : 200px;
border:1px solid;
overflow : auto;
border-color:rgb(204, 204, 204);
}
<div id="get" style="border:1px solid" contenteditable="true">

</div>

<br>
<button onclick="MyFunction()">Fetch</button><br>
<br>
<textarea id="pass">
Hello
How are You
</textarea>

ответил(а) 2017-11-05T10:22:00+03:00 2 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема