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:

/* stop hypenating words */
.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:





You can leave a comment on my original post.