Preserve line breaks in angularjs
angularjs, angularjs-ng-repeat
Solution
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
Problem
I have seen this SO question. My code instead of `ng-bind="item.desc"` uses `{{item.desc}}` because I have a `ng-repeat` before. So my code: ``` <div ng-repeat="item in items"> {{item.description}} </div> ``` The item description contains `\n` for newlines which are not rendered. How can the `{{item.description}}` display the newlines easily assuming that I have the `ng-repeat` above?