Question

我有多行文字内容，我想在div标签中显示。为此，我使用javascript将内容传递给div标签，如下所示

＆＃13;

function MyFunction(){
    document.getElementById("get").innerHTML = document.getElementById("pass").value;
}

＆＃13;

#get{
    height : 50px;
    width : 200px;
    border:1px solid;
    overflow  : auto;
    border-color:rgb(204, 204, 204);
}

＆＃13;

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

＆＃13;

但textarea中的内容是多行文字。但是它在html div标签中显示为单行，如上面的代码段i所示，e Hello在一行中，你是如何在不同的行中，但在div标签中它们都显示在同一行。

Answer 1

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

white-space: pre-wrap;

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

...保留了空白的序列。换行字符在换行符<br>处断开，并根据需要填充换行符。

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

以下是您更改的代码：

＆＃13;

function MyFunction(){
document.getElementById("get").innerHTML = document.getElementById("pass").value;
}

＆＃13;

#get{
height : 50px;
width : 200px;
border:1px solid;
overflow  : auto;
border-color:rgb(204, 204, 204);
white-space: pre-wrap;
}

＆＃13;

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

＆＃13;

Answer 2

更改了你的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>

Answer 3

您可以使用

 <pre></pre>

＆＃13;

function MyFunction(){
document.getElementById("get").innerHTML = document.getElementById("pass").value;
}

＆＃13;

#get{
height : 50px;
width : 200px;
border:1px solid;
overflow  : auto;
border-color:rgb(204, 204, 204);
}

＆＃13;

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

＆＃13;

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

3 个答案: