Preserve line breaks in angularjs

Question

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    lt div ng-repeat  item in items  gt      item description    lt  div gt    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

User · Answer

It s so simple with CSS  it works  I swear     angular-with-newlines     white-space  pre       Look ma  No extra HTML tags

User · Answer

Just add this to your styles  this works for me  white-space  pre-wrap   By this text in  lt textarea gt can be display as it s in there with spaces and line brakes   HTML      lt p class  text-style  gt   product  description   lt  p gt    CSS   text-style      white-space  pre-wrap

User · Answer

With CSS this can be achieve easily    lt div ng-repeat  item in items  gt   lt span style  white-space pre-wrap   gt    item description   lt  span gt   lt  div gt      Or a CSS class can be created for this purpose and can be used from external CSS file

User · Answer

the css solution works  however you do not really get control on the styling  In my case I wanted a bit more space after the line break  Here is a directive I created to handle this  typescript    function preDirective    angular IDirective       return           restrict   C           priority  450          link   scope  el  attr  ctrl    gt                scope  watch                       gt  el 0  innerHTML                   newVal    gt                        let lineBreakIndex   newVal indexOf   n                        if  lineBreakIndex  gt  -1  amp  amp  lineBreakIndex     newVal length - 1  amp  amp  newVal substr lineBreakIndex   1  4       lt  p gt                              let newHtml     lt p gt   replaceAll el 0  innerHTML    n n     n   split   n   join   lt  p gt  lt p gt     lt  p gt                            el 0  innerHTML   newHtml                                                                              function replaceAll str  find  replace            return str replace new RegExp escapeRegExp find    g    replace              function escapeRegExp str            return str replace                             g      1             angular module  app   directive  pre   preDirective     Use    lt div class  pre  gt   item description   lt  div gt    All it does is wraps each part of the text in to a  lt p gt  tag  After that you can style it however you want

User · Answer

Yes  I would either use the  lt pre gt  tag or use ng-bind-html-unsafe http   docs-angularjs-org-dev appspot com api ng directive ngBindHtmlUnsafe  use ng-bind-html if you are using 1 2   after using  replace   to change  n to  lt br   gt

User · Answer

I had a similar problem to you  I m not that keen on the other answers here because they don t really allow you to style the newline behaviour very easily  I m not sure if you have control over the original data  but the solution I adopted was to switch  items  from being an array of strings to being an array of arrays  where each item in the second array contained a line of text  That way you can do something like    lt div ng-repeat  item in items  gt     lt p ng-repeat  para in item description  gt         para      lt  p gt   lt  div gt    This way you can apply classes to the paragraphs and style them nicely with CSS

User · Answer

Based on  pilau s answer - but with an improvement that even the accepted answer does not have   lt div class  quot angular-with-newlines quot  ng-repeat  quot item in items quot  gt       item description    lt  div gt      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

User · Answer

Well it depends  if you want to bind datas  there shouldn t be any formatting in it  otherwise you can bind-html and do description replace    n g    lt br gt    not sure it s what you want though

User · Answer

Just use the css style  white-space  pre-wrap  and you should be good to go  I ve had the same issue where I need to handle error messages for which the line breaks and white spaces are really particular  I just added this inline where I was binding the data and it works like Charm

User · Answer

Try    lt div ng-repeat  item in items  gt     lt pre gt   item description   lt  pre gt   lt  div gt    The  lt pre gt  wrapper will print text with  n as text   also if you print the json  for better look use json filter  like    lt div ng-repeat  item in items  gt     lt pre gt   item description json   lt  pre gt   lt  div gt      Demo  I agree with  Paul Weber that white-space  pre-wrap  is better approach  anyways using  lt pre gt  - the quick way mostly for debug some stuff  if you don t want to waste time on styling

[angularjs] Preserve line breaks in angularjs

Examples related to angularjs

Examples related to angularjs-ng-repeat