CSS hyphens

The CSS hyphens property is used to control how words are hyphenated when they are too long to fit within a line box. It allows you to specify whether and how automatic hyphenation should occur in text content.

The hyphens property can take the following values:

1. none (default): Automatic hyphenation is disabled, and words will not be hyphenated.
2. manual: Automatic hyphenation is disabled, but you can use the soft hyphen (­ or ­) in the HTML markup to indicate possible hyphenation points.
3. auto: The browser is allowed to automatically hyphenate words when necessary, using the rules of the language specified in the lang attribute of the element or the lang property in CSS.

Example:

p {
  hyphens: auto;
}

In this example, the <p> elements will be allowed to be automatically hyphenated (auto) based on the language specified in the lang attribute or property.

Automatic hyphenation can be particularly useful in languages with complex words or when dealing with narrow columns of text, as it helps to improve the readability and aesthetics of the text by avoiding large gaps between words.

However, it’s important to use the hyphens property with care, as automatic hyphenation might not always be appropriate for certain types of content, such as headings or short blocks of text. In those cases, it’s often better to disable automatic hyphenation (hyphens: none) and handle hyphenation manually using soft hyphens (­) in the markup where needed.

As with any CSS property, consider the support for the hyphens property in different browsers and test its behavior in your target environments.