Don’t auto-hyphenate my code

I’ve no problem with WordPress doing auto-hyphenation of my wonderful English prose, but auto-hyphenation of any important-code-snippets cited inline within that prose is a big no-no and very confusing for the reader, who is presumably copying that code to the command line and thus wanting to be completely sure that what they’ll copy is what they’ll get.

The fact that browsers now compensate for the inserted hyphens when copying makes it even more desirable not to present hyphenated code in the first place.

After publishing my first post in this blog, it greatly bothered me when I saw that WordPress was hyphenating my inline code. As in “I won’t rest until this is sorted” bothered me.

I was able to fix this by editing style.css on my server and appending:

/* JRB: don't hyphenate code */
code {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

I hope this is useful.

Update 2013-05-08: You may want to do this in a child theme instead.

  • Pro: Robustness against updates to the parent theme.
  • Con: Increased loading times due to the CSS @import directive for importing the parent theme. Sites such as gtmetrix.com/ flag this rather highly but I’m not sure how much it matters in real life. There is always the nuclear option of cloning the entire theme, modifying it, and assuming the burden of merging any upstream changes into your clone.