CSS Portal

CSS hyphenate-limit-chars Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The hyphenate-limit-chars CSS property acts as a constraint on automatic hyphenation by preventing excessively short fragments of a word from being left at the start or end of a line when a hyphenation break is inserted. Its purpose is to keep split words readable and to avoid awkward visual hyphenation that leaves only one or two letters on a line, which can be distracting and hard to parse. This constraint is applied by the hyphenation engine after candidate break points are identified, and it effectively filters those candidates so only breaks that leave sufficiently long fragments are used.

Because it operates as a post-filter on candidate hyphenation points, hyphenate-limit-chars interacts directly with whether hyphenation is allowed at all — for example, automatic hyphenation must be enabled for the property to take effect, which is controlled via hyphens. When hyphenation is constrained by this property, you’ll typically see fewer hyphenated breaks in narrow columns or at small font sizes; the layout engine will instead keep the word unbroken and adjust line breaks elsewhere, which can affect line lengths, spacing, and overall rag or justification decisions.

This property also interacts with other line-wrapping and breaking behaviors, particularly those that determine where words may be broken and how overflow is handled. For instance, rules set by word-break about breaking within words or preventing breaks can override or combine with hyphenation constraints, so authors should consider both properties when managing complex multilingual or tightly constrained layouts. Note that scripts with no conventional hyphenation rules or languages that rely on different segmentation (e.g., East Asian text) may not be affected in the same way, since hyphenation engines and language-specific dictionaries play a central role in whether any breakpoints exist to be filtered.

In practical terms, hyphenate-limit-chars is a readability-oriented tool: it helps maintain visual and typographic quality by avoiding tiny orphaned fragments, but it does not force hyphenation where none is permitted nor does it replace explicit content decisions about word breaks. It’s best used in concert with hyphenation settings and line-wrapping strategies, tested across the languages and devices your content targets, and treated as a helpful constraint rather than a precise control for exact line-breaking outcomes.

Definition

Initial value
auto
Applies to
all elements
Inherited
yes
Computed value
as specified
Animatable
by computed value type
JavaScript syntax
object.style.hyphenateLimitChars

Syntax

hyphenate-limit-chars: [ auto | <integer> ]{1,3}

Values

  • [ auto | <integer> ]{1,3}The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The third value is the minimum number of characters after the hyphen. If auto is set for any of the values, the user agent will choose an appropriate value for the current layout.

Example

<div class="container">
<h1>CSS hyphenate-limit-chars - examples</h1>
<div class="examples">
<section class="example">
<h2>hyphenate-limit-chars: 4 2</h2>
<p class="limit-4-2">
The extraordinarily longwordexample demonstrates how hyphenation breaks words such as internationalization and characteristically when the container becomes narrow.
</p>
</section>

<section class="example">
<h2>hyphenate-limit-chars: 6 3</h2>
<p class="limit-6-3">
Mischaracterization and hippopotomonstrosesquipedaliophobia are intentionally long to show the effect of a stricter hyphenation limit in a constrained layout.
</p>
</section>

<section class="example">
<h2>No hyphenation (hyphens: none)</h2>
<p class="no-hyphen">
In this example hyphenation is disabled so long words will overflow or wrap without hyphen insertion.
</p>
</section>
</div>
</div>
/* Page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  line-height: 1.45;
  color: #222;
  background: #f7f7f7;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

/* Example cards */
.examples {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.example {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 280px;
}

.example h2 {
  font-size: 14px;
  margin: 0 0 8px 0;
}

/* Base hyphenation settings */
.example p {
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Different hyphenate-limit-chars usages */
.limit-4-2 {
  /* allow hyphenation only if at least 4 chars remain before the break and at least 2 after */
  hyphenate-limit-chars: 4 2;
}

.limit-6-3 {
  /* stricter limits: at least 6 chars before and 3 after the break */
  hyphenate-limit-chars: 6 3;
}

.no-hyphen {
  hyphens: none;
}

Browser Support

The following information will show you the current browser support for the CSS hyphenate-limit-chars property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported in some modern browsers, but not all.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!