hyphenate-limit-chars CSS property

Syntax

/* Numeric values */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* Mix of numeric and keyword values */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

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

Values

This property is specified as one to three values from the following list:

<integer>

Specifies either the number of characters for the minimum word length for hyphenation, the minimum number of characters before the hyphen, or the minimum number of characters after the hyphen.

auto

Specifies the user agent to choose appropriate values for the current layout. This is the default.

Description

The hyphenate-limit-chars property provides fine-grained control over hyphenation in text. This control enables you to avoid awkward hyphenations and set appropriate hyphenation for different languages, which, in turn, allows for better typography.

The property accepts one to three values, each an <integer> or the keyword auto, specifying the number of characters for the minimum word length for hyphenation, the minimum number of characters before the hyphen, and the minimum number of characters after the hyphen, in that order:

• If one <integer> is specified, it sets the word length for the minimum number of characters a word must have in order for it to be able to be hyphenated, while the minimum number of characters before and after the hyphen are set to auto.
• If two values are specified, the first value sets the minimum word length and the second sets the minimum number of characters both before and after the hyphen; the omitted third value defaults to the second value.
• If three values are specified, they set the minimum word length, the minimum number of characters before the hyphen, and the minimum number of characters after the hyphen, respectively.

For auto, the user agent will choose an appropriate value for the current layout. Unless the user agent can calculate a better value, the following default values will be used:

• Minimum word length to allow hyphenation: 5
• Minimum number of characters before the hyphen: 2
• Minimum number of characters after the hyphen: 2

Note that if a word is too short to meet the given constraints, it will not be hyphenated. For example, given a value like hyphenate-limit-chars: auto 3 4, words shorter than 7 characters will never be hyphenated, since it is impossible to have 3 characters before the hyphen and 4 characters after it.

Formal definition

Formal syntax

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

<integer> = 
  <number-token>  

Examples

Setting hyphenation limits

In this example, we have four boxes each containing the same text. For the purpose of comparison, the first box shows the default hyphenation applied by the browser. The next three boxes demonstrate the result of constraining the browser's default behavior using different hyphenate-limit-chars values.

HTML

<div class="container">
  <p id="ex1">juxtaposition and acknowledgement</p>
  <p id="ex2">juxtaposition and acknowledgement</p>
  <p id="ex3">juxtaposition and acknowledgement</p>
  <p id="ex4">juxtaposition and acknowledgement</p>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

p {
  margin: 1rem;
  width: 120px;
  border: 2px dashed #999999;
  font-size: 1.5rem;
  hyphens: auto;
}

#ex2 {
  hyphenate-limit-chars: 14;
}

#ex3 {
  hyphenate-limit-chars: 5 9 2;
}

#ex4 {
  hyphenate-limit-chars: 5 2 7;
}

Result

In the first box, we don't set hyphenate-limit-chars, allowing the browser to apply its default algorithm. By default, the browser uses the values 5 2 2 unless it can find better values.

In the second box, we prevent the browser from hyphenating words unless they are at least 14 characters long by setting hyphenate-limit-chars: 14. As a result, "juxtaposition" is not hyphenated in the second box because it is only 13 characters long.

In the third box, we constrain the browser to include at least 9 characters before the hyphen by setting hyphenate-limit-chars: 5 9 2. The effect is that "acknowledgement" is now hyphenated as "acknowledge-ment" rather than the default version "acknowl-edgement", as shown in the first box.

Note that the browser does not have to include exactly 9 characters before the hyphen: as long as the constraints given in hyphenate-limit-chars are satisfied, the browser can break the word in the place it considers best. So in this case, for example, it chooses "acknowledge-ment" rather than the less readable "acknowled-gement".

In the fourth box, we make the browser include at least 7 characters after the hyphen by setting hyphenate-limit-chars: 5 2 7. The effect is that "juxtaposition" is hyphenated as "juxta-position" rather than the default "juxtaposi-tion".

Specifications

Browser compatibility

See also

• hyphens
• CSS Text module