CSS - Hyphenate Character

Ethan D. -

Syntax and Usage

The CSS hyphens property controls the hyphenation of text in an element. It accepts three values: none, manual, and auto.

  1. none: This is the default value. When set to none, hyphenation is disabled, and words will not be hyphenated, even if they exceed the available space.

  2. manual: When set to manual, hyphenation is enabled but only applies to words manually hyphenated using the soft hyphen character (­). This allows for specific control over which words should be hyphenated.

  3. auto: When set to auto, the browser automatically hyphenates words as needed to optimize text layout based on language and typographic rules.

Example of the syntax

.element {
  hyphens: auto;
}

Browser support for the property varies. Most modern browsers support it, but some older versions may not. To check compatibility with different browsers, you can refer to online resources like Can I Use (https://caniuse.com/#feat=css-hyphens).

When using this property, it's recommended also to specify the lang attribute on the HTML element or use the CSS lang property to indicate the language of your text content. This helps apply correct rules specific to that language.

Keep in mind that this property only applies to block-level elements and inline-block elements. It does not work on inline elements unless they have a specific width set.

Hyphenation with CSS

Setting Hyphenation

To enable automatic hyphenation for text in an element, you can use the hyphens property with the auto value. When set to auto, the browser will automatically add hyphens to words as needed to break them across lines for better text layout and readability.

Example: Setting Hyphenation

p {
  hyphens: auto;
}

Specifying Hyphenation Zone

The hyphenate-limit-zone property allows you to define the width of the hyphenation zone, which is the area near the edge of the container where hyphens are allowed. This property takes a length value.

Example: Specifying Hyphenation Zone

p {
  hyphens: auto;
  hyphenate-limit-zone: 50px;
}

Limiting Consecutive Hyphens

To control the minimum number of characters before and after a hyphen, you can use the hyphenate-limit-chars property. It takes three values: minimum characters before a hyphen, minimum characters after a hyphen, and an optional third value for minimum word length to be eligible for a break.

Example: Limiting Consecutive Hyphens

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

Controlling Hyphenation Breaks

The hyphenate-limit-lines property allows you to limit how many consecutive lines can end with a break point. It helps prevent too many broken lines in sequence.

Example: Controlling Hyphenation Breaks

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

In this example, no more than two consecutive lines will end with breaks. If another line would need one, it moves it instead.