Question

我有这样的跨度：

<span class "message"></span>

我从这样的javascript填充它：

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

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

first message br second message.

基本上，我想展示：

first message
second message

Answer 1

您可以使用<br />和html()来破解新行上的文字：

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

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

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

Answer 2

首先，HTML中存在错误，应该是：

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

JS中也有一个错误：

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

但是我认为这只是OP中提到的错误

问题是当我的浏览器上显示文字时，...

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

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

检查代码段

＆＃13;

.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;
}
/* ================ */

＆＃13;

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

＆＃13;

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

2 个答案: