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

insert newline in text displayed in span from javascript

本文关键字：文本 插入 换行符 显示 javascript span      更新时间：2023-09-26

我有一个像这样的span:

<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

您可以使用<br />和html()在新行上分隔文本:

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

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

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

首先，你的HTML中有一个错误，它应该是:

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

JS中还有一个错误:

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

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

的问题，是当文本显示在我的浏览器上，…

解决方案:不需要任何花哨的JS或更改代码。实现您想要的最简单的解决方案是在span上使用CSS属性(mozilla文档，w3规范)white-space。它有很好的浏览器支持。

white-space: pre-wrap;    /* Allows wrapping */
/* Other possibilities for similar(not same) */
/* white-space: pre-line; */
/* white-space: pre; */
检查demo 的代码片段

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

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

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

相关文章：