Render a string in HTML and preserve spaces and linebreaks

html css newline whitespace line-breaks
Dan dot net picture Dan dot net · Feb 29, 2012 · Viewed 151.3k times · Source

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)

Answer

pete picture pete · Feb 29, 2012

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>

Related questions

HTML <pre> tag causes linebreaks

I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave …

Read More
How can I use CSS to insert a line break after but not before an element?

For example: HTML: The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog. I want this to display: The quick brown fox {BREAK} jumps over the lazy dog. I looked into the …

Read More
CSS data attribute new line character & pseudo-element content value

Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</…

Read More