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:
/* 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:
- https://css-tricks.com/almanac/properties/h/hyphenate/
- https://css-tricks.com/almanac/properties/w/word-break/