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:
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:
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:
- https://css-tricks.com/almanac/properties/h/hyphenate/
- https://css-tricks.com/almanac/properties/w/word-break/
Jay Versluis, 
juliav305 12:10 pm on November 5, 2015 Permalink |
Excellent – exactly what I’ve been looking for. It was definitely a feature that was annoying me.