javascript div 元素内带有换行符的文本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25862896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text with newline inside a div element is not working
提问by Psl
I have a div element
我有一个 div 元素
<div id="testResult" style="padding-left: 120px;">
I am trying to print some text with newline character '\n'inside the divelement.
我正在尝试'\n'在div元素内打印一些带有换行符的文本。
But in my htmlpage displayed text is ignoring the newline character.
但是在我的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")
I want to show the text as:
我想将文本显示为：
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 |
回答by Flobbo
You could try a simple css approach maybe?
你可以尝试一个简单的css方法吗？
#testResult {
white-space: pre-wrap;
}
This will preserve the \n in your output.
这将保留输出中的 \n。
回答by JLRishe
To preserve newlines and spaces, you can use a <pre>element:
要保留换行符和空格，您可以使用一个<pre>元素：
<pre id="testResult" style="padding-left: 120px;"></pre>
$("#testResult").text("Feature: Apply filter to image\n...e:47\n");
Also note the use of .text()rather than .html(). You should always use .text()unless you have a specific reason to need .html().
还要注意使用.text()而不是.html()。.text()除非有特殊原因需要，否则应始终使用.html()。
回答by Char
pre-lineis suitable. pre-wrap has extra space before index 0 of the text
pre-line适合。pre-wrap 在文本的索引 0 之前有额外的空间
#testResult {
white-space: pre-line;
}
回答by Abdul Jabbar
in HTML <br>is used for new line.. this following code will give your desired result:
在 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>");
