Preserve line breaks in angularjs

by

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

More Related Contents:

  1. How to iterate over the keys and values with ng-repeat in AngularJS?
  2. How to make ng-repeat filter out duplicate results
  3. AngularJS For Loop with Numbers & Ranges
  4. Calculating sum of repeated elements in AngularJS ng-repeat
  5. Difficulty with ng-model, ng-repeat, and inputs
  6. Angular ng-repeat add bootstrap row every 3 or 4 cols
  7. Angular ng-repeat conditional wrap items in element (group items in ng-repeat)
  8. passing 2 $index values within nested ng-repeat
  9. ng-repeat filtering data by date range
  10. How to use ng-repeat for dictionaries in AngularJs?
  11. Directive isolate scope with ng-repeat scope in AngularJS
  12. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  13. Ng-click doesn’t work inside ng-repeat
  14. AngularJS – How can I reference the property name within an ng-Repeat
  15. AngularJS : ng-repeat filter when value is greater than
  16. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  17. AngularJS Group By Directive without External Dependencies
  18. Angular orderBy number sorting as text in ng-repeat
  19. Using comma as list separator with AngularJS
  20. How to use “ng-repeat” within template of a directive in Angular JS?
  21. AngularJs Remove duplicate elements in ng-repeat
  22. Using ng-if as a switch inside ng-repeat?
  23. AngularJS – Filter empty objects
  24. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  25. How to highlight a selected row in ngRepeat?
  26. ng-repeat specify a starting index
  27. angularjs text area character counter
  28. How to obtain previous item in ng-repeat?
  29. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  30. Highlighting a filtered result in AngularJS

Leave a Comment