HTML/CSS - Best practice for preserving white space on certain elements?

html css whitespace
contactmatt picture contactmatt · Jan 24, 2012 · Viewed 76.4k times · Source

What is the best way to preserve white space in HTML? We have a lot of pages that bring down data from our database, and the data may have multiple spaces in it. The rendered HTML elements that hold the data vary from anchor tags (<a>), spans (<span>), table rows (<tr>, <td>, etc.

The easiest thing to do right now would be to add a global css class like so:

body a, span, tr, td { white-space: pre; }

I'm wondering if there is a better way to implement this without assigning a class to each individual HTML element.

Answer

Diodeus - James MacFarlane picture Diodeus - James MacFarlane · Jan 24, 2012

I would use the same technique, but inside a data class wrapper where it is needed:

.data a, .data span, .data tr, .data td { white-space: pre; }

HTML:

<div class="data">
....

</div>

Related questions

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 …

Read More
Remove "whitespace" between div element

This is my HTML code <div id="div1"> <div></div><div></div><div></div><br/><div></div><div>&…

Read More
Ignore whitespace in HTML

Is there anything in HTML/CSS that tells the browser to ignore whitespace completely? So many times when you want to put, say, two images next to each other - you try desperately to keep the HTML readable, but the …

Read More