How to avoid hyphenations in TwentyFifteen by Automattic

By default, TwentyFifteen will hyphenate text on posts and pages. This works well for most, but some find this feature annoying. It’s easy to override with a small CSS tweak – let me show you how.

Here’s what a post might look like by default:

Screen Shot 2015-11-05 at 11.39.53

Notice the hyphenations in lines 3 and 4. Now add the following to your stylesheet:

/* stop hypenating words */
.entry-content, .entry-summary, .page-content, .comment-content {
		
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	word-wrap: normal;

}

Now the post should look like this – no more hyphens in sight:

Screen Shot 2015-11-05 at 11.40.14

And in case you ever want to bring it back, delete the above, or set them to their default values:

/* start hypenating again */
.entry-content, .entry-summary, .page-content, .comment-content {
	
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word;
}

Under the hood, CSS uses two distinct properties: hyphens and word-wrap. However, not all browsers acknowledge each property – and with the above we’ll target most common browsers in use today.

Check out the following links for more information on the hyphens and word-wrap properties:





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.