CSS - Hyphens

Ethan D. -

The hyphens Property

The hyphens CSS property is used to control how words should be hyphenated when text wraps across multiple lines. It tells the browser if and how to hyphenate words when line-wrapping text content. The hyphens property accepts three possible values: none, manual, and auto.

The default value of the hyphens property is manual, which means that words will only be broken at line breaks where there are characters inside the word that suggest line break opportunities, such as hyphens (-), en dashes (–), em dashes (—), or soft hyphens (­). If the hyphens property is set to none, words are not broken at line breaks, even if characters inside the word suggest line break opportunities. If the hyphens property is set to auto, the browser can automatically break words at appropriate hyphenation points, following its own rules.

The hyphens property is inherited, meaning that if it is set on a parent element, it will apply to all child elements as well unless overridden by a more specific rule.

The none Value

When the hyphens property is set to none, words are not broken at line breaks even if characters inside the word suggest line break opportunities. This means that if a word is too long to fit on the current line, it will overflow or be moved to the next line instead of being hyphenated.

Example: Using none value

p {
  hyphens: none;
}

In this code snippet, you set <p> elements not to allow any hyphenation even if there are characters inside them suggesting otherwise.

The 'manual' Value

When you use this value for 'hyphens', words will only be broken at places where there are characters suggesting possible breaks like regular or soft hyphons (default setting).

Example: Using manual value

p {
  hyphans: manual;
}

This code sets <p> elements so they only allow manual breaking based on special character placement within them.

The 'auto' Value

When you use this value for 'hypen', browsers can automatically find appropriate places within each individual instance.

Controlling Hyphenation

In addition to the hyphens property, CSS provides other properties that allow you to control how hyphenation behaves in your web pages.

The hyphenate-character property lets you specify the character used when hyphenating words. By default, the hyphen character (-) is used, but you can change it to any other character if desired.

Example: Hyphenate Character

p {
  hyphens: auto;
  hyphenate-character: '=';
}

The hyphenate-limit-chars property allows you to specify the minimum number of characters that must be present before and after a hyphenation point. It takes one to three integer values, representing the minimum number of characters before the hyphenation point, after the hyphenation point, and the minimum word length.

Example: Hyphenate Limit Characters

p {
  hyphens: auto;
  hyphenate-limit-chars: 5 3 8;
}

The hyphenate-limit-lines property specifies how many consecutive lines can be hyphenated. It takes an integer value.

Example: Hyphenate Limit Lines

p {
  hyphens: auto;
  hyphernate-limit-lines: 2;
}

The hyphanate-limit-zone defines how much unfilled space (called "hyphenation zone") can be left at end of a line before hyphenation is triggered. It takes a length value.

Example: Hyphenate Limit Zone

p {
  hyphens: auto;
  hyphenate-limit-zone: 8em;
}

This code sets the maximum hyphenation zone at the end of the line to 8em for <p> elements.