How to use a Non-Breaking Space in WordPress

A non-breaking space allows you to add a space between two words that prevents an automatic line break (line wrap) at its position.

They’re commonly used where amounts, such as dollars are separated using a space or when typing a brand name.

When using Microsoft Word it’s as easy as typing Ctrl + Shift + Space – but it’s not at easy in an HTML WYSIWYG editor such as in WordPress.

To use non-breaking spaces in WordPress in you need to apply some PHP code to your WordPress installation, as shown below:

If you’re not sure where to place this code I highly recommend you read How to create a WordPress plugin for your custom functions.

function itsg_allow_nbsp_in_tinymce( $init ) {
    $init['entities'] = '160,nbsp,38,amp,60,lt,62,gt';   
    $init['entity_encoding'] = 'named';
    return $init;
}
add_filter( 'tiny_mce_before_init', 'itsg_allow_nbsp_in_tinymce' );

You can then follow the steps below to insert a non-breaking space into a WordPress post.

  1. With the post open, click on the ‘Text’ tab at the top of the WYSIWYG editor
  2. WordPress-NonBreakingSpace1
  3. Locate where you need the non-breaking space, it’ll be harder to read since it’s the source code – not the formatted text.
  4. Once you’ve located the place, remove the normal space and add the following code
  5.   
  6. BEFORE
  7. WordPress-NonBreakingSpace2
  8. AFTER
  9. WordPress-NonBreakingSpace3
  10. You can nowclick on the ‘Visual’ tab to return to the visual editor
  11. Click Publish/Update to save the changes.

If you would like to make the key combination automatically create non-breaking spaces, as it does in Microsoft Word – see WordPress – How to automatically insert Non-Breaking Space using Ctrl + Shift + Space

Tagged in

4 comments on “How to use a Non-Breaking Space in WordPress

  1. I followed your guide and it works perfectly, thank you so much! Now sometimes I need a thin non-breakable space (French typographic rules). I found the code   but do I have to apply a new custom PHP code? If so, would it be the same as the one above with #8239 instead of nbsp? Thanks if you can help!

    1. Thanks for letting me know.
      I suspect i was skipping step 10, I tend to work in the text editor a lot.
      It turns out you need to add a function to customise how the visual editor (TinyMCE is used by default in WordPress) handles non-breaking spaces.
      I’ve updated the article. If you still need it to retain nbsp’s you need to add this to your website you’ll find what you need to do in the article above. (can’t paste it in here sorry).

      Next up – I want to add a button that does the nbsp ! that would be cool.

    2. After entering the “&nbsp” codes, click “Update” button and then only switch to the WYSIG mode. It will retain the codes. This works beautifully and solves many problems!
      It would be great to patch code that would automatically replace spaces with nbsp where the context demands it. This is the case with French typographic rules as nbsp are compulsory before “;”, “:”, “?”, “!”, “»” and after “«”.
      Wordpress already does it fixing smart quotes, for instance it does replace plain quotes with “« ” and ” »” if French lnguage is selected. So I guess there is a workable solution fiddling with the code in the template files.

Leave a Comment

Your email address will not be published. Required fields are marked *