Remove auto hyphenation – hyphens in WordPress

stop remove hyphens from WordPress - prevent broken words, word breaks

Say ‘no’ to inappropriate punctuation marks. This post aims to help those wanting to remove automatic hyphens / auto hyphenation occurring on their WordPress website or blog.

We have noticed that some themes including TwentyTwelve have kept the pesky critters in place, which for some, make your page layout look neat, but are a bit unsightly.

remove auto hyphenation / hyphens from your WordPress website

The issue also seems to only surface in a few web browsers, including Safari but not Chrome. So, if you’ve just noticed you’ve got hyphens in your pages or posts – there is a quick and painless solution.

The solution to remove auto hyphenation (for WordPress users)

Copy and paste the following code into your CSS stylesheet:

/* Remove automatic hyphenation */
.site-content article { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }
.widget-area .widget { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }

For most WordPress users this will live in the administration area in Appearance > Editor … Then select ‘style.css’. If you are not familiar with CSS code then it is best to paste the text above at the bottom of the stylesheet.

WordPress theme editor

The use of the humble hyphen

The hyphen ‘-‘ (not to be confused with a dash ‘–’) is a punctuation mark used to both separate syllables of single words as well as join together ordinarily separate words.

The principle use of fragmenting single words with hyphens in long justified paragraphs of text, is to keep the line-breaks consistent and the word spacing regular. For some design conscious people, me included, fully justified text is normally a no-no. Although, I can see they have a beneficial use in certain situations, namely newspapers and paperbacks.

But to keep them for a web blog, I feel is a bit archaic and to me, a too forceful way of ‘text control’.

Why not let text be free to flow,

unhindered.

With less guiding rules.

Lines should break when it is most appropriate. Not at an exact location for an OCD mind to feel content.

To me, this feels more natural and less formal.

I’m sure there are many a hyphen-lover amongst you. Please don’t all throw your punctuation marks out of the pram in the comments below. This tiny ramble is just an opinion. :)

What are your opinions on the humble hyphen? Why do you want to remove auto hyphenation on your site? When and where are these typographic symbols most appropriate? Feel free to discuss below.

Kind regards,
The Zaposphere Team

Have our latest posts delivered straight to your inbox.

Comments 5

  1. Those pesky hyphens are coming more into play and becoming an issue with mobile screens. Google’s update this April might cause a lot of problems for hyphenated words – I’ll be montioring!

      1. Post
        Author
  2. Will this non-hyphenation code remain in place after WordPress updates itself? I have been told in the past that I need to create a child theme in order to keep changes in place, but that is a bit beyond me. Thanks.

    1. Post
      Author

      Yes you are right, if you edit your current theme’s stylesheet via Appearance>Editor then any changes will be overwritten with the next theme update. However… the simple workaround is to use a plugin instead. May I suggest trying the ‘My Custom Styles’ plugin (https://wordpress.org/plugins/my-custom-styles/) or the custom CSS option within ‘Jetpack’ (https://wordpress.org/plugins/jetpack/). By using plugins to store the custom code you won’t have any issues updating WordPress or your theme. ;)

      Good luck and thanks for your comment.

Ask a question or write a comment here…