CSS hyphens

The CSS hyphens property controls when hyphenation is allowed in text. It can help improve the readability of text by breaking long words at appropriate points. By default, hyphenation is disabled in most browsers. However, you can use the hyphens property to enable it for specific elements.

The hyphens property has three possible values:

none: Hyphenation is disabled.
manual: Hyphenation is only allowed where specified using the <wbr> tag.
auto: The browser automatically hyphenates text at appropriate points.

Let's see some examples of how the hyphens property works in CSS:

Result:

Thisisaverylongwordthatneedstobebrokenintosmallerpartsforreadability.


<p style="hyphens: auto;">Thisisaverylongwordthatneedstobebrokenintosmallerpartsforreadability.</p>

In the example above, the hyphens property is set to auto for the paragraph element. As a result, the browser automatically breaks the long word "readability" into smaller parts for better readability.

Result:

Thisisaverylongwordthatneedstobebrokenintosmallerpartsforreadability.


<p style="hyphens: manual;">Thisisaverylongwordthatneedsto<wbr>bebrokenintosmaller<wbr>partsforreadability.</p>

In this example, the hyphens property is set to manual, and the <wbr> tag is used to specify where hyphenation is allowed. The word "needsto" and "smaller" are broken into smaller parts at the specified points.

Result:

Thisisaverylongwordthatwillnotbebrokenintosmallerparts.


<p style="hyphens: none;">Thisisaverylongwordthatwillnotbebrokenintosmallerparts.</p>

Finally, when the hyphens property is set to none, hyphenation is disabled, and the long word "smallerparts" remains unbroken.