CODEWITHSUNDEEP
htmlangularfirebasefirebase-realtime-database
cfoster5
cfoster5

Reputation: 1826

Keep line breaks in HTML string

Using Angular 5 and Firebase, I am storing and retrieving movie review information. When creating and editing the review, line breaks are kept (I assume using an ngModel has something to do with this). However, when retrieving the review from a reader's perspective, the ReviewComponent, the line breaks are not kept. Logging the body still shows the line breaks and using Angular's json pipe shows as text\n\ntext showing where the line breaks should be.

Here is my HTML:

<main role="main" class="container">
  <p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>

I have also tried span and body.

How can I keep these line breaks in the review for the reader?

Upvotes: 32

Views: 54608

Answers (5)

Zaid Pathan
Zaid Pathan

Reputation: 16820

This worked for my <i> tag.

<i style="display: block" [innerHTML]="review.body"></i>

Upvotes: 0

John Gilmer
John Gilmer

Reputation: 909

I had a similar situation where I had HTML code like this:

<div>{{msgTitle}}</div>

And I tried putting both '\r\n' and &lt;br&gt; in the string msgTitle, but neither of them worked to put a newline in the text displayed on the page. This link gave me the solution:

https://github.com/angular/angular/issues/7781

Use [innerHTML]="msgTitle" instead of {{msgTitle}}.

Upvotes: 7

JustLearning
JustLearning

Reputation: 3322

by using the [innerText] directive the white spaces seem to be maintained, as well as the \n new lines

e.g. <small style="display:block" [innerText]="review.body"></small>

Upvotes: 31

Piotr Mirosz
Piotr Mirosz

Reputation: 866

try span but set it like that:

span 
{ 
    display : table;
}

it should helps.

Upvotes: -5

Jon P
Jon P

Reputation: 19772

HTML, in general, uses br tags to denote a new line. A plain textarea tag does not use this, it uses whatever the user's system uses to denote a new line. This can vary by operating system.

Your simplest solution is to use CSS

<main role="main" class="container">
  <p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>

This will maintain any "white space" formatting, including additional spaces.

If you want to actually replace the newline characters with br tags you can use the following regex

<main role="main" class="container">
  <p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>

Edit Thanks to ConnorsFan for the heads up on replace not working with interpolation.

Upvotes: 56

Related Questions