CODEWITHSUNDEEP
htmlcssnewlinewhitespaceline-breaks
Dan dot net
Dan dot net

Reputation: 6499

Render a string in HTML and preserve spaces and linebreaks

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)

Upvotes: 424

Views: 318403

Answers (8)

CODER MOMO
CODER MOMO

Reputation: 11

You can use <p> instead of <div>.

And also use this CSS:

word-wrap: break-word;
white-space: pre-wrap;
margin: 0 !important;

Upvotes: 1

Nima Habibollahi
Nima Habibollahi

Reputation: 470

Instead of using a div tag use a p tag inside a div tag which preserves line breaks.

But in case you have to use , you can inspire from this code:

<script>
  $( document ).ready(function() {
    var str = $("body").html();
    var regex = /[\n]/g;
    $("body").html(str.replace(regex, "<br>"));
  });
</script>

Upvotes: 0

N30
N30

Reputation: 3663

have you tried using <pre> tag.

 <pre>
    
    Text with
    
    multipel line breaks embeded between pre tag
    
    will work    and 
       also tabs..will work
    
it will preserve the formatting..
    </pre>

Upvotes: 84

Developer
Developer

Reputation: 2006

You would want to replace all spaces with &nbsp; (non-breaking space) and all new lines \n with <br> (line break in html). This should achieve the result you're looking for.

body = body.replace(' ', '&nbsp;').replace('\n', '<br>');

Something of that nature.

Upvotes: 9

pete
pete

Reputation: 25081

Just style the content with white-space: pre-wrap;.

div {
    white-space: pre-wrap;
}
<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>

Upvotes: 917

rafalkasa
rafalkasa

Reputation: 2021

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;"

Upvotes: 57

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

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 <pre> tags and the following css and everything was good to go..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

Upvotes: 5

Mauricio Morales
Mauricio Morales

Reputation: 1018

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(" ", "&nbsp;").Replace("\n", "<br>")

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 

<p>, <span>, <strong>

... but don't allow 

<script> or <iframe>

Upvotes: 1

Related Questions