在 javascript 的 span 中显示的文本中插入换行符答案

【问题标题】：insert newline in text displayed in span from javascript在 javascript 的 span 中显示的文本中插入换行符
【发布时间】：2015-06-09 13:29:00
【问题描述】：

我有这样的跨度：

<span class "message"></span>

我正在像这样从 javascript 填充它：

message = "first message" + "\\\n";
            message = message + "second message";            
            $(".message".)text(errorMessage);
            $(".message").show();

问题在于，当文本显示在我的浏览器上时，两条消息在同一行，我不能用换行符插入第二条消息。而在我的调试控制台中，文本很好地显示在 2 行上。我也试过<br>，这是最糟糕的，因为它没有被解释，所以我收到这样的消息：

first message br second message.

基本上，我想显示：

first message
second message

【问题讨论】：

试试$(".message").html(errorMessage) 和<br>。对于.html()，它将考虑换行

标签： javascript newline

【解决方案1】：

您可以使用<br /> 和html() 来换行：

message = "first message" + "<br />";
message += "second message";
$(".message").html(errorMessage).show();

设置匹配元素集中每个元素的 HTML 内容。

文档：http://api.jquery.com/html/

【讨论】：

【解决方案2】：

首先，你的HTML有错误，应该是：

<span class="message"></span>

JS中也有错误：

$(".message".)text(errorMessage);    // <-- Incorrect
$(".message").text(errorMessage);    // <-- Correct

但我相信这只是提到的 OP 中的一个错字

问题在于，当文本显示在我的浏览器上时，...

解决方案： 不需要任何花哨的 JS 或更改代码。实现您想要的最简单的解决方案是在span 上使用 CSS 属性 (mozilla docs, w3 specs) white-space。它具有出色的浏览器支持。

white-space: pre-wrap;    /* Allows wrapping */
/* Other possibilities for similar(not same) */
/* white-space: pre-line; */
/* white-space: pre; */

查看 sn-p 以获取演示

.message.prewrap {
  white-space: pre-wrap;
}
.message.preline {
  white-space: pre-line;
}
.message.pre {
  white-space: pre;
}
/* Not required, only for demo */
/* ================ */
.box {
  border: 1px solid #d0d5de;
}
.title {
  background: #d0d5de;
}
.title > span {
  font-weight: bold;
  text-decoration: underline;
}
/* ================ */

<div class="title">
  <pre>white-space: pre-wrap;</pre>
  <span>Will retain white-spaces like new-lines, tabs and spaces. It will wrap the text</span>
</div>
<div class="box">
  <span class="message prewrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

<hr>

<div class="title">
  <pre>white-space: pre-line;</pre>
  <span>Will retain new-lines but lose tabs and spaces. It will wrap the text</span>
</div>

<div class="box">
  <span class="message preline">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

<hr>

<div class="title">
  <pre>white-space: pre;</pre>
  <span>will retain only new-lines and will not wrap the text.</span>
</div>

<div class="box">
  <span class="message pre">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

【讨论】：

【解决方案3】：

我意识到这是一个老问题，但如果其他人正在寻找进一步的解决方案，那么在 CSS 中为 span 元素使用 display: table 的选项对我来说效果很好。

这篇css-tricks文章有一些有用的想法：https://css-tricks.com/injecting-line-break/

【讨论】：