hyphenate-limit-chars | CSS-Tricks

The hyphenate-limit-chars property in CSS tells the browser how many characters a word should be before it’s hyphenated, as well as the minimum number of characters before and after the hyphen. This way, we can avoid awkward hyphenations, giving us an extra degree of control when it comes to how words flow from line to line.

.element {
  hyphens: auto;
  hyphenate-limit-chars: 10 3 4;
}

In the CSS rule above, the last declaration indicates to the browser that it should hyphenate only words of 10 characters or more and, when it does, three is the minimum number of characters before the hyphen and four is the minimum after the hyphen. Note that hyphens: auto; is only needed if the hyphens: none; has been set somewhere else in the stylesheet so that hyphenation is enabled.

hyphenate-limit-chars is included in the CSS Text Module Level 4 specification, which is currently in Draft status. That means the definition is only provided for discussion and can be changed at any time.

Syntax

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

Initial value: auto
Applies to: text
Inherited: yes
Computed value: three values, each either the auto keyword or an integer
Animation type: by computed value type

If the third value is unspecified, then it uses the same value as the second one. If both the second and third values are unspecified, then it evaluates to auto which means the user agent deems what is best based on the language and layout.

The default value of hyphenate-limit-chars, auto, is equivalent to 5 2 2 (i.e. the word length is 5, and 2 is the minimum number of characters before and after the hyphen).

Values

hyphenate-limit-chars: auto;
hyphenate-limit-chars: 8 2 4;
hyphenate-limit-chars: 8 2; /* 8 2 auto */
hyphenate-limit-chars: 8; /* 8 auto auto */

/* Global values */
hyphenate-limit-chars: initial;
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: unset;

Browser support

hyphenate-limit-chars property is supported by Edge and Internet Explorer 10+ with the -ms prefix. It is also supported in Safari with -webkit-hyphenate-limit-before and –webkit-hyphenate-limit-after which are both legacy properties. As their names imply, -webkit-hyphenate-limit-before specifies the minimum number of characters before the hyphen and –webkit-hyphenate-limit-after, the minimum number of characters after the hyphen.

Putting all that together, we have:

.element {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
}