Render a string in HTML and preserve spaces and linebreaks

Question

I have an MVC3 app that has a details page  As part of that I have a description  retrieved from a db  that has spaces and new lines  When it is rendered the new lines and spaces are ignored by the html  I would like to encode those spaces and new lines so that they aren t ignored   How do you do that   I tried HTML Encode but it ended up displaying the encoding  and not even on the spaces and new lines but on some other special characters

User · Answer

You can use white-space  pre-line to preserve line breaks in formatting  There is no need to manually insert html elements    popover       white-space  pre-line          or add to your html element style  white-space  pre-line

User · Answer

As you mentioned on  Developer  s answer  I would probably HTML-encode on user input  If you are worried about XSS  you probably never need the user s input in it s original form  so you might as well escape it  and replace spaces and newlines while you are at it    Note that escaping on input means you should either use  Html Raw or create an MvcHtmlString to render that particular input   You can also try  System Security SecurityElement Escape userInput    but I think it won t escape spaces either  So in that case  I suggest just do a  NET   System Security SecurityElement Escape userInput  Replace        amp nbsp    Replace   n     lt br gt      on user input   And if you want to dig deeper into usability  perhaps you can do an XML parse of the user s input  or play with regular expressions  to only allow a predefined set of tags  For instance  allow    lt p gt    lt span gt    lt strong gt        but don t allow    lt script gt  or  lt iframe gt

User · Answer

You would want to replace all spaces with  amp nbsp   non-breaking space  and all new lines  n with  lt br gt   line break in html   This should achieve the result you re looking for  body   body replace        amp nbsp    replace   n     lt br gt      Something of that nature

User · Answer

Just style the content with white-space  pre-wrap     x000D   x000D  div   x000D      white-space  pre-wrap  x000D    x000D   lt div gt  x000D  This is some text   with some extra spacing    and a x000D  few newlines along with some trailing spaces         x000D       and five leading spaces thrown in x000D  for                                              good x000D  measure                                               x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Wrap the description in a textarea element

User · Answer

have you tried using  lt pre gt  tag   http   jsfiddle net NweRa

User · Answer

I was trying the white-space  pre-wrap  technique stated by pete but if the string was continuous and long it just ran out of the container  and didn t warp for whatever reason  didn t have much time to investigate   but if you too are having the same problem  I ended up using the  lt pre gt  tags and the following css and everything was good to go    pre   font-size  inherit  color  inherit  border  initial  padding  initial  font-family  inherit

User · Answer

There is a simple way to do it  I tried it on my app and it worked pretty well   Just type    text    row  text                echo nl2br  text

[html] Render a string in HTML and preserve spaces and linebreaks

Examples related to html

Examples related to css

Examples related to newline

Examples related to whitespace

Examples related to line-breaks