Preserve line breaks in angularjs
Based on @pilau s answer - but with an improvement that even the accepted answer does not have.
<div class="angular-with-newlines" ng-repeat="item in items"> {{item.description}}</div>/* in the css file or in a style block */.angular-with-newlines { white-space: pre-line;}
This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you want to break on newlines, but also not collapse multiple spaces or white space preceeding the text (to render code or something), you can use:
white-space: pre-wrap;
Nice comparison of the different rendering modes: http://meyerweb.com/eric/css/tests/white-space.html
Try:
<div ng-repeat="item in items"> <pre>{{item.description}}</pre></div>
The <pre>
wrapper will print text with \n
as text
also if you print the json, for better look use json
filter, like:
<div ng-repeat="item in items"> <pre>{{item.description|json}}</pre></div>
I agree with @Paul Weber
that white-space: pre-wrap;
is better approach, anyways using <pre>
- the quick way mostly for debug some stuff (if you don't want to waste time on styling)
It's so simple with CSS (it works, I swear).
.angular-with-newlines { white-space: pre;}
- Look ma! No extra HTML tags!