91

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.

2
  • 6
    Your example does not use a css class and does not require you to assign a class to each individual element. Commented Jan 24, 2012 at 21:37
  • 1
    @RichardMarskell-Drackir Yea, I rarely deal with CSS, don't know CSS very well lol Commented Jan 24, 2012 at 21:43

4 Answers 4

126

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>
1
  • 1
    This is a good idea. It's far easier to wrap the output, than change all the tags in that output.
    – Alex Wayne
    Commented Jan 24, 2012 at 21:39
42
<pre>no need for       style</pre>
3
  • 10
    Be aware that the pre tag is usually displayed as a block element. Commented Nov 27, 2017 at 8:30
  • 6
    Also be aware that pre usually (always?) includes font-family: monospace; in its default style. Commented Nov 18, 2019 at 22:04
  • 1
    For many people, this is not a helpful answer because much of the time it's better to have your tags correspond to the UI element they are making, and this is better for SEO. For example, do not ever put your headers in <pre>. Instead, use <h1>, <h2>, etc. Commented Nov 19, 2021 at 16:06
16

This depends on whether you wish to preserve all whitespace in certain elements and what exactly should happen there. Assuming that there are no CSS rules that might interfere, your CSS can be simplified to

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

because an a element is alway within body and td by default inherits the property from tr.

If you only wish to prevent multiple spaces from collapsing, instead of forcing fixed division to lines, then white-space: pre-wrap or replacing spaces by no-break spaces might be more adequate.

Finally, the need and possibilities for restricting the rule to selected elements greatly depend on how the selection should be done. Perhaps you can selectively set white-space to pre (or pre-wrap) to some elements that enclose the relevant parts, remembering that the property inherits if not set on inner elements.

You can also break the inheritance: you could set white-space: pre on a table element for example, if you wish to make the rule apply to most of the content, and set white-space: normal on those rows or cells where it is not to be applied.

10

What is wrong with replacing spaces by &nbsp;? This should work inside any element and preserve the spaces in the rendered output.

5
  • 21
    The wrong with this is that there are 26 different whitespaces (\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF) (perfectionkills.com/whitespace-deviations lists 25, but there is also \uFEFF) and the width of "white-space" is not the same in all of possible white-spaces. It's up to font designer to decide the width of character, also white-space character. If you replace space (\x20) with &nbsp;, it should be okay, but there are 25 other possible white-spaces to care of. Commented Feb 28, 2013 at 23:25
  • Depending on your server side language, you may have something like char.iswhitespace msdn.microsoft.com/en-us/library/system.char.iswhitespace.aspx which makes it easy to replace all whitespace characters. Commented Mar 21, 2013 at 19:34
  • 3
    However, using the whitespace: pre option has been simpler/easier in my opinion as you can change the stylesheet without changing your code. Commented Mar 21, 2013 at 20:01
  • 2
    HTML5 spec says that browsers should only collapse 5 (ascii) whitespace characters (space, tab, cr, lf, ff). The unicode ones don't collapse, at least not on modern browsers. w3.org/TR/html5/infrastructure.html#skip-whitespace
    – JasonWoof
    Commented Mar 18, 2016 at 18:51
  • 1
    The main issue about &nbsp; is that it's non-breaking which breaks the responsive design when the size changes.
    – Ranmocy
    Commented May 9, 2022 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.