div 元素内带有换行符的文本不起作用答案

【问题标题】：Text with newline inside a div element is not workingdiv 元素内带有换行符的文本不起作用
【发布时间】：2014-11-09 20:32:57
【问题描述】：

我有一个 div 元素

<div id="testResult" style="padding-left: 120px;">

我正在尝试在 div 元素内打印一些带有换行符 '\n' 的文本。

但是在我的html 页面中显示的文本忽略了换行符。

 $("#testResult").html("Feature: Apply filter to image\n    As an user\n    I want to be able to apply a filter to my image\n    So I can make it look better and match my card's stile\n\n  @US2330 @done\n  Scenario Outline: Apply filter to a picture    # features/card_edit_filter.feature:33\n    Given I am on \"Filters Editor\" screen        # features/step_definitions/common_steps.rb:1\n    And I see my card with the original image    # features/step_definitions/card_filter_steps.rb:21\n    When I touch the \"<filter_name>\" filter      # features/step_definitions/card_filter_steps.rb:1\n    Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26\n\n    Examples: \n      | filter_name   |\n      | Black & White |\n      | Sepia         |\n      | Vintage       |\n\n  @US2330 @done\n  Scenario: Restore image after applying filter  # features/card_edit_filter.feature:47\n")

我想将文本显示为：

Feature: Apply filter to image
    As an user
    I want to be able to apply a filter to my image
    So I can make it look better and match my card's stile

  @US2330 @done
  Scenario Outline: Apply filter to a picture    # features/card_edit_filter.feature:33
    Given I am on "Filters Editor" screen        # features/step_definitions/common_steps.rb:1
    And I see my card with the original image    # features/step_definitions/card_filter_steps.rb:21
    When I touch the "<filter_name>" filter      # features/step_definitions/card_filter_steps.rb:1
    Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26

    Examples: 
      | filter_name   |

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

要保留换行符和空格，您可以使用<pre> 元素：

<pre id="testResult" style="padding-left: 120px;"></pre>

$("#testResult").text("Feature: Apply filter to image\n...e:47\n");

还要注意使用.text() 而不是.html()。您应该始终使用.text()，除非您有特定的理由需要.html()。

【讨论】：

【解决方案2】：

在 HTML 中 <br> 用于换行。以下代码将给出您想要的结果：

$("#testResult").html("Feature: Apply filter to image<br>    As an user<br>    I want to be able to apply a filter to my image<br>    So I can make it look better and match my card's stile<br><br>  @US2330 @done<br>  Scenario Outline: Apply filter to a picture    # features/card_edit_filter.feature:33<br>    Given I am on \"Filters Editor\" screen        # features/step_definitions/common_steps.rb:1<br>    And I see my card with the original image    # features/step_definitions/card_filter_steps.rb:21<br>    When I touch the \"<filter_name>\" filter      # features/step_definitions/card_filter_steps.rb:1<br>    Then I see the image with the filter applied # features/step_definitions/card_filter_steps.rb:26<br><br>    Examples: <br>      | filter_name   |<br>      | Black & White |<br>      | Sepia         |<br>      | Vintage       |<br><br>  @US2330 @done<br>  Scenario: Restore image after applying filter  # features/card_edit_filter.feature:47<br>");

【讨论】：

要走这条路，他/她还必须用&nbsp;替换所有空格。

【解决方案3】：

可以使用<pre>标签

DEMO

【讨论】：

【解决方案4】：

也许你可以尝试一个简单的 css 方法？

#testResult {
   white-space: pre-wrap;
}

这将在您的输出中保留 \n。

【讨论】：

另外值得注意的是，它将保留输出中的空格，这是 OP 想要的。
你可以使用 \t 作为标签

【解决方案5】：

添加这个css：

#testResult
{
    white-space:pre-wrap;
}

Demo

【讨论】：

【解决方案6】：

pre-line 适合。 pre-wrap 在文本的索引 0 之前有额外的空间

#testResult {
   white-space: pre-line;
}

【讨论】：

【解决方案7】：

其他朋友也建议使用下面的语法，仅当您在组件中对该字符串进行硬编码时才有效，如下所示：

 var string = "hello\nworld"

 <div>{string}</div>

 //style

 .div {
   white-space: pre-wrap
  }

但是当您从服务器获取此字符串时（当该字符串以form-data 格式添加到数据库时），它类似于：

let fetchedString = "hello\\nworld"

此时上述样式无法提取 \n，因为它现在被称为字符串。

为了解决这个问题，我做了以下事情：

var newString = fetchedString.split("\\n").join("\n")

【讨论】：