I have text from a JSON that looks something like this:
"some text some text some text \n\n New paragraph text \n\n Another new paragraph"
I then have a simple div that looks like this:
<div ng-bind="textFromJSON"></div>
For some reason, the text that is rendered to the page turns out without the line breaks. ie
some text some text some text New paragraph text Another new paragraph
If I look inspect that text with the chrome dev tools, it shows the blocks of text split up into paragraphs using the \n line breaks like I had anticipated.
some text some text some text
New paragraph text
Another new paragraph
Does anyone know how I can get the page to render it properly?
I have text from a JSON that looks something like this:
"some text some text some text \n\n New paragraph text \n\n Another new paragraph"
I then have a simple div that looks like this:
<div ng-bind="textFromJSON"></div>
For some reason, the text that is rendered to the page turns out without the line breaks. ie
some text some text some text New paragraph text Another new paragraph
If I look inspect that text with the chrome dev tools, it shows the blocks of text split up into paragraphs using the \n line breaks like I had anticipated.
some text some text some text
New paragraph text
Another new paragraph
Does anyone know how I can get the page to render it properly?
Share Improve this question asked Sep 8, 2016 at 19:10 AngunaAnguna 1802 silver badges9 bronze badges 02 Answers
Reset to default 17It does. The issue is html doesn't display it because of the white-space default setting, change your div to this:
<div ng-bind="textFromJSON" style="white-space:pre-wrap"></div>
See https://jsfiddle/xtqe7on2/ as an example
You can use <pre>
<div><pre>{{textFromJSON}}</pre></div>