在div中显示多行字符串

Question

我有一个注册过程，在确认详细信息时，我试图显示输入的地址，但我似乎无法正确显示它，我已经尝试了网站上的其他答案，但似乎没有一个有效.

代码

console.log('compAdd_Passed_From_Func', compAdd)

$('#cdCompAdd').html(compAdd);
$('#cdCompAdd1.5').text(compAdd);
console.log('cdCompAdd', $('#cdCompAdd').val(compAdd))
console.log('cdCompAdd1.5', $('#cdCompAdd').val(compAdd))

$('#cdCompAdd2').html(compAdd);
console.log($('#cdCompAdd2').html(compAdd))

HTML

<textarea id="cdCompAdd" style="pointer-events: none; resize: none;border: none; overflow: hidden"></textarea>
<textarea id="cdCompAdd1.5" style="pointer-events: none; resize: none;border: none; overflow: hidden"></textarea>
<div id="cdCompAdd2" class="col-12"></div>

理想情况下，我想使用

DIV

但我最初尝试并找到了一个答案说使用

textarea

查看

devtools

，地址从我最初的

function

传递到填充页面上所有字段的

function

，是正确的，如下所示：

但这就是我的实际页面的样子：

这是填充我的“compAdd”的

function

。

$('#compAddressDetailsSection :input.address').each(function () {
    if (this.value != '') {
        compAdd += this.value + '\n';
    }
});

它在用户离开页面时执行此操作，并按如上所示工作，但我无法将其显示为：

添加第一行

添加第二行

镇

县

BB1 1BB

Answer 1

正如你所问：

只需将

'\n'

更改为

'<br>'

。
HTML 不会显示换行符（直到它们位于

<pre>

标签内）。

Answer 2

或者，您可以输出到

 容器而不是 
。 pre 将尊重换行符、缩进等。

    

将此样式添加到您的 div 中
white-space: pre-wrap

答案来自：https://github.com/angular/angular/issues/7781#issuecomment-502162034
    

Answer 3

将此样式添加到您的 div 中

white-space: pre-wrap

答案来自：https://github.com/angular/angular/issues/7781#issuecomment-502162034