CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Psl
Psl

Reputation: 3920

Text with newline inside a div element is not working

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

Answers (7)

Mahdieh Shavandi
Mahdieh Shavandi

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

Char
Char

Reputation: 2133

pre-line is suitable. pre-wrap has extra space before index 0 of the text

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

Upvotes: 3

Umesh Sehta
Umesh Sehta

Reputation: 10659

Add this css:

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

Demo

Upvotes: 119

JLRishe
JLRishe

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

Flobbo
Flobbo

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

charlietfl
charlietfl

Reputation: 171698

Can use a <pre> tag

DEMO

Upvotes: 0

Abdul Jabbar
Abdul Jabbar

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

Related Questions