How to Remove Hyphenation in CSS
What you’ll build or solve
You’ll remove automatic hyphenation for a page or a specific block of text.
When this approach works best
This approach works best when hyphenation hurts readability or doesn’t match your design.
Learn CSS on Mimo
Use it when you:
- Display short paragraphs where hyphenated breaks look awkward.
- Style product names, headings, or UI text where hyphens feel like errors.
- Show multilingual content where hyphenation rules vary and produce surprising breaks.
Skip this approach when:
- You rely on hyphenation to keep narrow columns from overflowing.
Prerequisites
- A CSS file linked to your page or a
<style>tag - A selector for the text you want to change, such as a class or element
Step-by-step instructions
Step 1: Disable hyphenation with hyphens
Use the hyphens property to control automatic hyphenation.
Option A: Turn off hyphenation for a specific block (most common)
CSS
.article {
hyphens:none;
}
Option B: Turn off hyphenation for the whole page
CSS
body {
hyphens:none;
}
What to look for
- If hyphens still appear, they may be real hyphen characters in your content, not automatic hyphenation.
- Some browsers only hyphenate when the page language is set, such as
<html lang="en">. Behavior can vary slightly across browsers. - If turning hyphenation off causes overflow with long words, add a wrapping rule as shown below.
Examples you can copy
Example 1: Remove hyphenation from a blog post
CSS
<articleclass="post">
<p>This paragraph will not auto-hyphenate at line endings.</p>
</article>
CSS
.post {
hyphens:none;
}
Example 2: Remove hyphenation from headings and UI labels
<h2class="title">Subscription settings</h2>
<pclass="label">Account verification</p>
CSS
.title,
.label {
hyphens:none;
}
Example 3: Remove hyphenation from a sidebar with narrow width
Bash
<asideclass="sidebar">
<p>Internationalization and configuration can look messy when hyphenated.</p>
</aside>
CSS
.sidebar {
hyphens:none;
}
Common mistakes and how to fix them
Mistake 1: Disabling hyphenation, but the text still shows hyphens
What you might do:
CSS
.article {
hyphens:none;
}
Why it breaks:
Those hyphens might be typed into the content, like state-of-the-art, or inserted as soft hyphens.
Correct approach:
Search your content for hyphen characters or soft hyphens and remove them if they aren’t intended.
PHP
<!-- Soft hyphen example -->
<span>inter­nationalization</span>
<!-- Remove the soft hyphen if you don’t want breaks there -->
<span>internationalization</span>
Mistake 2: Turning off hyphenation and causing overflow on small screens
What you might do:
CSS
.card {
hyphens:none;
}
Why it breaks:
Long words, file names, or URLs may not wrap and can push outside the container.
Correct approach:
Add a wrapping rule for long words.
CSS
.card {
hyphens:none;
overflow-wrap:break-word;
}
Mistake 3: Applying the rule to the wrong selector
What you might do:
CSS
.articlep {
hyphens:none;
}
Why it breaks:
Hyphenation might be happening on other text nodes, such as list items, headings, or nested components.
Correct approach:
Apply it to a container so it covers all text inside.
CSS
.article {
hyphens:none;
}
Troubleshooting
- If hyphens appear in only one browser, that browser may apply language-specific hyphenation rules differently.
- If you see breaks that look like hyphenation even after turning it off, look for
­in your HTML or CMS output. - If text overflows after disabling hyphenation, add a wrapping rule:
CSS
.article {
hyphens:none;
overflow-wrap:break-word;
}
- If only some sections change, your selector might not match the container where hyphenation is happening.
- If nothing changes, confirm your stylesheet is loading and not being overridden later.
Quick recap
- Use
hyphens: noneto remove automatic hyphenation. - Apply it to a container to cover all text inside.
- If hyphens remain, check for real hyphens or soft hyphens in your content.
- If text overflows after the change, add
overflow-wrap: break-word. - If your rule doesn’t apply, check selector scope and CSS overrides.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot