3 Ways To Force Whitespace In The WordPress Editor

A few days ago, I had to solve a weird problem with formatting in WordPress. I use a table plugin that automatically expands the table columns to fit the widest content. However, I wasn’t happy with where it was breaking a sentence and wanted to increase the table column. So I decided to put some spaces in the column to artificially increase the column width. However, I was in for a surprise as the browser just ignored my extra whitespaces!

So I did some research and found three different ways to force a browser to recognize whitespaces that you put in the WordPress editor. Of these techniques, only one of them is foolproof, but the others might work, depending on your default CSS rules.

The Problem: Ignoring Whitespace

Let’s say I want to separate two words in a post by a long gap. Here’s how I would start off by typing it in the Gutenberg WordPress editor:

Unfortunately, this doesn’t work as the browser simply ignores my consecutive whitespaces and displays everything together like this:

The reason this happens is because it’s in the HTML specification. It also makes sense, since otherwise the browser would have to display all whitespaces in the code, which would make it look nothing like the text on the screen. There’s also some historical precedent to why this happens, but that’s beside the point!

We can get around this problem in the following three ways.

Method 1: Use  

This method can work well if your theme supports it. Personally, I’ve found it to be an unreliable solution as it works in some themes, but not in others. The way to do it is to paste the following into the WordPress editor instead of a space:

So your HTML code will look like this:

Do this for as many spaces as you want to create. If you’re lucky, your theme will have CSS rules that explicitly render the space:

However as mentioned, I wouldn’t use this method even if it works with your existing theme. For one, your theme might change in the future to one that renders it wrong, and second, I’m not sure how well all browsers will show it.

Method 2: Using <pre> Tags

This is the second most reliable method for displaying consecutive whitespaces in WordPress. With the new Gutenberg editor, you can create a <pre> block just by typing:

/pre

And selecting it from the list of options that show up. Then you can write whatever you want, and use the spaces like you would normally. This will probably render the text the way you want:

However, I’ve found that even this method doesn’t always work. Which seems counter-intuitive because the whole purpose of <pre> is to ensure that text is displayed exactly as is. But for whatever reason, it doesn’t always work.

Another disadvantage of <pre> is that the text displays in a specific format, which is probably not what you’re going for. Of course, you can solve this with CSS, but that’s another hassle.

Method 3: Using white-space:pre

This is the most reliable method I’ve found to date. To use it, create a custom HTML block in the Gutenberg WordPress editor and use the “white-space: pre;” style like this:

 
<div style="white-space: pre;">                                     </div> 

Here’s what it looks like in block form:

And when you preview the post, you can see that the spaces are rendered properly:

This way, you don’t need to have any additional CSS to remove the styling from the pre block. This solution works in all browsers, and with all themes. The whitespace styling is inline, so there’s no need for additional CSS.

If you need to force whitespaces to show, this is probably your best solution!