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/