How to avoid hyphenations in TwentyFifteen by Automattic

- by

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:

2 thoughts on “How to avoid hyphenations in TwentyFifteen by Automattic”

Add your voice!

This site uses Akismet to reduce spam. Learn how your comment data is processed.