Question

我尝试显示多行文本，但总是显示为一行。

例如：

var text ="line 1. \n line 2. \n line 3."

它应该显示为：

line 1.

line 2.

line 3.

但我最终还是得到

line 1. line 2. line 3.

在呈现的html页面中。

我尝试了jquery文本和html方法，但是没有用。

即使通过angularjs，也总是一样。

$('#element').text(text);

$('#element').html(text);

or

<div>{{ text  }}</div>

没有办法得到我期望的东西吗？

Answer 1

尝试

<div class="angular-with-newlines">
    {{ text  }}
</div>

css

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

这将使用给定的换行符和空格，但也会在内容边界处中断内容。有关空白属性的更多信息，请参见：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

如果您想换行，并且还要在文本前折叠多个空格或空白（非常类似于原始浏览器的行为），则可以使用：

white-space: pre-line;

Answer 2

也许是，这就是您想要的...

<textarea id="text"></textarea>
<p id="text2"></p>
<button onclick="multi_line_textarea()">on textarea</button>
<button onclick="multi_line_para()">on paragraph</button>


   <script>
            function multi_line_textarea(){
                var text = "line 1. \nline 2. \nline 3.";
                var el = document.getElementById('text');
                el.innerHTML = text;
            }
            function multi_line_para(){
                var text2 = "line 1. <br/>line 2. <br/>line 3.";
                var el2 = document.getElementById('text2');
                el2.innerHTML = text2;
            }
   </script>

这是一个jsFiddle：https://jsfiddle.net/p984fd1m/2/

希望有帮助。

Answer 3

尝试这样。 <p style="white-space: pre-line;">{{ text }}</p>

javascript显示多行文字

3 个答案: