Efficiently revising whitespace display in HTML:

Question

We've got a website that's grown for a while. Several thousand lines of HTML. We want to change the way whitespace is handled.

When content is coming back from the db, we want to preserve whitespace in that content (showing, for example, if there are multiple spaces between words).

We can't apply { white-space: pre } globally--there's lots of whitespace we don't want to preserve. This completely wrecked the site when we tried it.

We could make a CSS class with { white-space: pre } and apply it individually to each bit of rendered content, but this will be hundreds or thousands of changes. We'd like to avoid this.

Is there some other clever way to approach this? Has anyone dealt with similar and found an efficient way of handling?

Answer 1

You could process your data server-side after getting it from the DB, wrapping it in <pre> tags or replacing whitespace with equivalent HTML like <br> and  .