Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 618
contactmatt Avatar asked Jan 24 '12 21:01

contactmatt


People also ask

How do you preserve white space in HTML?

The HTML <pre> tag defines preformatted text preserving both whitespace and line breaks in the HTML document. This tag is also commonly referred to as the <pre> element.

How do I stop white space collapse in HTML?

Well, you can use the &nbsp; metacharacter to produce a "non-breaking space." (I used one in-between these two sentences.


2 Answers

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> 
like image 141
Diodeus - James MacFarlane Avatar answered Sep 30 '22 20:09

Diodeus - James MacFarlane


<pre>no need for       style</pre> 
like image 21
LastTribunal Avatar answered Sep 30 '22 20:09

LastTribunal