I'd like a specific menu item to have more spaces between words.

For example: Word Word

Needs to be: Word      Word

In the menu editor, WP strips-out any additional spaces added with the spacebar or using the HTML code  .

What's the next most efficient method?

I'd like a specific menu item to have more spaces between words.

For example: Word Word

Needs to be: Word      Word

In the menu editor, WP strips-out any additional spaces added with the spacebar or using the HTML code  .

What's the next most efficient method?

• menus

• You could achieve this with CSS, using the word-spacing property. – Jacob Peattie Commented Oct 1, 2018 at 2:44

2 Answers 2

Previously I assumed WP would strip HTML, so I never tried it.

The HTML below works like a charm, using the WP menu editor:

Word <span style="margin-left: 20px;"> </span> Word

(however, inputting   didn't)

Alternatively, the CSS trick mentioned by Jacob and Linda would work well too:

word-spacing: 3px;

My menu item actually has 4 words, and I just needed to increase the middle spacing.

In the end, it's nice avoiding a PHP function or JS client-side. I just wonder is there any issue down the line having HTML in my menu title. Other than my menu rendering in the page layout, I can't think of where else I may output the menu items to.

One of the options in the wp_nav_menu function is whether to preserve whitespace. The default is that it’s preserved, but perhaps your theme has it set to discard?

https://developer.wordpress/reference/functions/wp_nav_menu/ 'item_spacing' (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.

You could also add a CSS class to just that one menu item and use the word-spacing property to give the appearance of more spaces: https://developer.mozilla/en-US/docs/Web/CSS/word-spacing