多行值显示在 html 中的 div 标签内的单行中

Question

我有我想在 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 标签中显示为一行，如上面的代码片段所示，即你好在一行中，你好吗在另一行中，但在 div 标签中，它们都显示在同一行中。

Answer 1

一个简单的解决方案是使用以下 CSS：

white-space: pre-wrap;

根据MDN，使用pre-wrap...

...保留空白序列。换行符、 at<br>和必要时换行以填充行框。

您也可以使用white-space: pre;.

这是带有该更改的代码：

white-space: pre-wrap;

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;
}