Text with a new line inside a div element does not work

Question

I have a div element

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

I am trying to print some text with a newline character '\n' inside a div element.

But on my html page, the displayed text ignores the newline character.

  $("#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 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 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

Add this css:

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

Demo

Answer 2

Can I try a simple css approach, maybe?

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

This will save \ n in your output.

Answer 3

To save newlines and spaces, you can use the <pre> element:

 <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() , not .html() . You should always use .text() unless you have a specific reason for .html() .

Answer 4

You can use the <pre>

Demo

Answer 5

in HTML <br> used for a new line .. this following code will give the desired result:

 $("#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 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>");