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

Question

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 1

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>