Tailwind CSS Hyphens

The hyphens utility class in Tailwind CSS is used to specify whether or not to use hyphenation to break words in content when text wraps to multiple lines.

Syntax

<div class="hyphens-none | hyphens-manual | hyphens-auto"></div>

Example

<p class="hyphens-none">
   This is a text that should not be hyphenated.
</p>

<p class="hyphens-manual">
   This is a text that should be hyphenated manually.
</p>

<p class="hyphens-auto">
   This is a text that should be hyphenated automatically.
</p>

Output

The output of the above example will be like this:

• hyphens-none: The text is not hyphenated and wrapped to multiple lines as is.
• hyphens-manual: The text is hyphenated manually and wrapped to multiple lines as per the positions specified by the author.
• hyphens-auto: The text is hyphenated automatically and wrapped to multiple lines as required by the browser.

Explanation

Hyphenation is a process of breaking words and dividing them into syllables at the end of the line when text wraps to multiple lines. It makes the text more readable and avoid breaking words at awkward positions. CSS hyphenation property has three possible values:

• none: It specifies that the text should not be hyphenated when it wraps to multiple lines.
• manual: It specifies that the text should be hyphenated manually as per the author's specification.
• auto: It specifies that the text should be hyphenated automatically by the browser.

In Tailwind CSS, hyphens utility classes are used to apply the hyphenation property to an element.

Use

The hyphens utility classes are used wherever you need to break words when text wraps to multiple lines. You can apply them to any HTML element that wraps text.

Important Points

• The hyphens utility classes work with the white-space and word-wrap properties while wrapping text to multiple lines.
• Not all browsers support the hyphens property, so you should test your website in different browsers before applying it.
• If you use automatic hyphenation, make sure to define the correct lang attribute on the HTML element to enable correct language-specific hyphenation.

Summary

• Use hyphens-none class to disable hyphenation on an element.
• Use hyphens-manual class to break words manually as per the author's specification.
• Use hyphens-auto class to enable automatic hyphenation of text wrapped to multiple lines.