I am developing an AngularJS application. In that, when I fetch data from the database to display it to the user, the extra spaces are trimmed to one space from the data which has more than one space between two words.

I tried <pre> tag of HTML and it works fine except one thing. It changes the style of the text. I applied different CSS in <pre> tag but I'm not getting the convenient result.

So how can I make it look like as it looks in normal HTML?

I'm attaching a sample:

<pre style="font-family: arial; font-size: 14px">{{name}}</pre>

It's working but it just doesn't help with the styles.

I am developing an AngularJS application. In that, when I fetch data from the database to display it to the user, the extra spaces are trimmed to one space from the data which has more than one space between two words.

I tried <pre> tag of HTML and it works fine except one thing. It changes the style of the text. I applied different CSS in <pre> tag but I'm not getting the convenient result.

So how can I make it look like as it looks in normal HTML?

I'm attaching a sample:

<pre style="font-family: arial; font-size: 14px">{{name}}</pre>

It's working but it just doesn't help with the styles.

• javascript
• html
• css
• angularjs

• what do you want it to look like? – Luca Kiebel Commented Jul 26, 2017 at 11:54
• Try to use <p ng-bind-html="name"></p> – Carnaru Valentin Commented Jul 26, 2017 at 11:54
• Thank you friends, Sajin's answer helped. – TheCleverIdiot Commented Jul 26, 2017 at 12:11

1 Answer 1

Try

<p style='white-space: pre;'>

instead of pre tag