Angular text with formatting whitespaces

Question

I have the following text, which is properly saved into database, and served back to browser:

Very very



long text

But in my angular application I get

Very very long text

<td [innerHTML]="client.text"></td> // doesn't work
<td>{{client.text}}</td> // doesn't work


// What I wish to achieve displayed into the browser:
Very very



long text

How am I able to achieve the consistency as above? I have a textarea which displays the text properly, however I wish to display it in a div/span/td element. Is this possible?

Naren · Accepted Answer · 2020-12-03T18:19:08.997

0

You can use pre tag to display the exact way it supposed to be.

As per HTML Documentation:

Text in a pre element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Try this:

<td><pre>{{client.text}}</pre></td>

Also you can do with css as well using white-space: pre-wrap., Check out this answer

<td style="white-space: pre-wrap;">{{ client.text }} </td>

edited Dec 03 '20 at 18:19

answered Dec 03 '20 at 17:31

Naren

4,152
3
17
28

I think you got this wrong. I mean the opposite way - I have a text with whitespaces in it and I want them to be displayed, instead of trimmed. – Ilia Hanev Dec 03 '20 at 17:49
Oh gotcha, let me fix it – Naren Dec 03 '20 at 18:03
Updated, Check once – Naren Dec 03 '20 at 18:13
Okay, that's what I was looking for. Thanks a lot @Naren. – Ilia Hanev Dec 04 '20 at 16:30

Angular text with formatting whitespaces

1 Answers1