How to Remove Hyphenation with CSS
When you are styling text on a website, have you ever noticed odd little dashes appearing at the end of lines? That’s the browser doing automatic hyphenation breaking words with a hyphen so part of the word drops to the next line. While this can sometimes help readability in narrow columns, it often causes issues: it can look sloppy, messy, or simply un-intentional.
Understand Hyphenation in CSS
What the hyphens Property:
CSS offers the hyphens property to control how words are broken with hyphens when wrapping to a new line. The possible values:
none: Words are never hyphenated at line breaks.manual: Only break where hyphenation opportunity is explicitly marked (soft-hyphen­, hard hyphen).auto: The browser can automatically hyphenate words based on language and internal dictionaries.
Why Hyphenation Happen:
When text is long and the container is narrow (like on a mobile screen), browsers may insert hyphens to make the layout more compact or balanced. Also, if a language attribute (lang) is defined, the browser can use language-specific rules to insert hyphens.
Why Disabling Hyphenation Might Be Better:
- Hyphenation can disrupt readability when done poorly (e.g., “wonder-ful” gets split weirdly).
- On mobile, frequent hyphens can make text look broken or fragmented.
- Some content types (code, technical terms, URLs, email addresses) should never be broken. For example, hyphenation in an email address can break links.
How to Remove Hyphenation with CSS
Basic CSS Snippet:
To disable hyphenation across your body text, you can use:
body {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}This instructs browsers (including older ones via vendor prefixes) not to break words with hyphens. Many sources recommend including vendor prefixes for broader support.
Applying to Specific Elements:
If you only want to disable hyphenation for certain elements (e.g., paragraphs, headings):
p, h1, h2, h3 {
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
hyphens: none !important;
}Using !important helps override theme or framework styles that may force hyphens: auto. Many “how to remove hyphenation” posts in CMS-contexts (like WordPress or Squarespace) use this approach.
Consider Responsive Contexts:
Especially on mobile, hyphenation is more likely because of the narrow container width. So you might want to wrap the disabling CSS within a media query:
@media (max-width: 600px) {
body {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
}This ensures that when screen width shrinks, you prevent hyphenation that might otherwise be inserted by the browser.
Handling Special Content (Code, Emails, Technical Terms):
- For inline code blocks or
<code>elements: the property may inherit from body — you might want to explicitly disable hyphenation since a broken code term is visually confusing:code, pre { white-space: nowrap; hyphens: none; }This approach is suggested in older posts about where to avoid hyphenation. - For email addresses or URLs: since these should never break with hyphens, target selectors like
a[href^="mailto:"]or wrap the content in a<span class="no-break">and applywhite-space: nowrap; hyphens: none;.
Common Pitfalls and How to Avoid Them
Browser Support and Language Attributes:
Not all browsers support hyphens fully, especially older ones. Even when they do, the language (lang attribute) must be set for automatic hyphenation to work or cease properly.
So, always include:
<html lang="en">or appropriate language code this helps the browser understand hyphenation rules.
CSS Overriding and Specificity
If a theme or framework sets hyphens: auto with high specificity, your snippet might not apply unless you use !important or increase specificity. Always check computed styles in browser dev tools.
Content Already Contains Soft Hyphens:
If the text includes soft hyphens (­) or hard hyphens (-, U+2011 non-breaking hyphen), disabling hyphenation won’t affect the hyphens already in content. You’ll need to remove or replace those manually.
Word-Break vs Hyphenation:
Sometimes, unexpected line breaks are due not to hyphenation but to word-break, overflow-wrap, or white-space properties. Make sure you’re debugging the correct cause. For instance, word-break: break-all can cause unwanted breaking even with hyphens: none. A forum post describes exactly this situation.
Real World Example CSS Code to Drop into Your Project
Here’s a ready-to-paste snippet for your codebase:
/* Prevent hyphenation across site */
html, body {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
overflow-wrap: normal;
}
/* Also apply to main textual elements */
p, h1, h2, h3, h4, h5 {
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
hyphens: none !important;
}
/* Special handling for inline code, preformatted text, email links */
code, pre, a[href^="mailto:"] {
white-space: nowrap;
hyphens: none;
}You can drop this into your site’s main stylesheet (or a custom CSS box if using a CMS) and you’ll likely see immediate effect. For modules/themes that already define hyphenation, you may need to inspect and override more specific selectors.
Conclusion
Using the simple CSS property hyphens: none (along with vendor prefixes and additional wrapping rules) you can take control of how your text wraps on the web. Whether you’re using a CMS like WordPress or building a custom app, the steps are straightforward but you need to know why and where to apply them. You’ve now got the full picture: what hyphenation is, how it works, how to disable it, and the extra checks to make sure it actually takes effect.