hyphens

Definition

The hyphens property in CSS allows you to specify whether or not a word should be broken at its hyphens.

There are two options for the CSS hyphens property.

hyphens: none;
hyphens: manual;
hyphens: auto;

Syntax

.article {
  hyphens: auto;
}

Values

manual: only hyphenate at  soft hyphen points.
auto: allow the browser to insert hyphenation points based on language.
none: disable automatic hyphenation.

Practical Examples

.article {
  hyphens: auto;
}

Hyphenation reduces awkward gaps in justified or narrow columns.

HTML

Without hyphenation, justified text can develop rivers and uneven spacing in narrow columns.

Enabling hyphens: auto helps maintain smooth edges and balanced word spacing.

Code

<div class="grid gap-4 sm:grid-cols-2">
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm leading-relaxed text-slate-700 shadow-sm" style="max-width: 18rem; hyphens: none; text-align: justify;">Without hyphenation, justified text can develop rivers and uneven spacing in narrow columns.</p>
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm leading-relaxed text-slate-700 shadow-sm" style="max-width: 18rem; hyphens: auto; text-align: justify;">Enabling <code>hyphens: auto</code> helps maintain smooth edges and balanced word spacing.</p>
</div>

Tips & Best Practices

Declare lang attributes on HTML elements so browsers choose the correct hyphenation dictionary.
Combine with text-justify for high-quality justified text.
Disable hyphenation on headings or short labels where breaks look awkward.

Accessibility & UX Notes

Avoid excessive hyphenation for screen readers—ensure the plain text remains intelligible.

Browser Support

Supported in modern browsers (Chrome 88+, Firefox, Safari). Requires -ms- prefix in legacy Edge.

overflow-wrap for emergency breaks.
text-justify to manage justification.
word-break as an alternative for long tokens.