Question

我有一个div元素

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

我正在尝试使用'\n'元素中的换行符div打印一些文字。

但是在我的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   |

Answer 1

添加此css：

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

Demo

Answer 2

你可以尝试一种简单的CSS方法吗？

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

这将保留输出中的\ n。

Answer 3

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

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

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

另请注意使用.text()而不是.html()。除非您有特殊原因需要.text()，否则应始终使用.html()。

Answer 4

可以使用<pre>代码

的 DEMO

Answer 5

pre-line是合适的。预包装在文本的索引0之前有多余的空间

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

Answer 6

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

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

Answer 7

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>");

div元素中带换行符的文本无效

7 个答案: