Reputation: 3920
I have a div element
<div id="testResult" style="padding-left: 120px;">
I am trying to print some text with newline character '\n'
inside the div
element.
But in my html
page displayed text is ignoring 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'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 |
Upvotes: 46
Views: 50098
Reputation: 8645
The syntax below that other friends suggested too, just works when you have hardcoded that string in your component, like this:
var string = "hello\nworld"
<div>{string}</div>
//style
.div {
white-space: pre-wrap
}
but when you fetch this string from the server (when the string has been added to database in form-data
format), it is something like:
let fetchedString = "hello\\nworld"
and that's when the above styling can't extract that \n
, because it's now known as string.
to solve this, I did the following:
var newString = fetchedString.split("\\n").join("\n")
Upvotes: 1
Reputation: 2133
pre-line
is suitable. pre-wrap has extra space before index 0 of the text
#testResult {
white-space: pre-line;
}
Upvotes: 3
Reputation: 101778
To preserve newlines and spaces, you can use a <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()
rather than .html()
. You should always use .text()
unless you have a specific reason to need .html()
.
Upvotes: 1
Reputation: 531
You could try a simple css approach maybe?
#testResult {
white-space: pre-wrap;
}
This will preserve the \n in your output.
Upvotes: 15
Reputation: 2573
in HTML <br>
is used for new line.. this following code will give your 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'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>");
Upvotes: -1