Tailwind CSS - Hyphens

Previous
Quiz
Next

Tailwind CSS Hyphens is a collection of predefined classes that control how words break at hyphenation points within text elements on web pages.

Tailwind CSS Hyphens Classes

Below is a list of Tailwind CSS Hyphens classes with properties for controlling the hyphenation of words within text elements.

Class CSS Properties
hyphens-none hyphens: none;
hyphens-manual hyphens: manual;
hyphens-auto hyphens: auto;

Functionality Of Tailwind CSS Hyphens Classes

  • hyphens-none: This class ensures words break only at specified hyphenation points.
  • hyphens-manual: This class ensures words break only at specified hyphenation points.
  • hyphens-auto: This class allows words to break automatically at hyphenation points based on language rules.

Tailwind CSS Hyphens Class Examples

Below are examples of Tailwind CSS Hyphens classes that show how words can be hyphenated within text elements on web pages.

Preventing Hyphenation

This example uses Tailwind CSS hyphenation classes. It includes a ­ (soft hyphen) for suggesting a line break. The 'hyphens-none' class prevents hyphenation even with a line break suggestion.

Example

 
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
       Tailwind CSS Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-none
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphens-none">
            This is a long word: ­supercalifragilisticexpialidocious.
            This word should not be hyphenated even if the line break
            suggestion is used.
        </p>
    </div>
</body>

</html>

Controlling Hyphenation

This example shows how the Tailwind CSS 'hyphens-manual' class can be used to control hyphenation in text. When applied, it ensures that hyphenation occurs only at manually specified points.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
       Tailwind CSS Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-none
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphen-manual">
            This is a long word: ­ supercalifragilisticexpialidocious
            .This word should be hyphenated as the line break suggestion 
            is used.
        </p>
    </div>
</body>

</html>

Applying Automatic Hyphenation

This example shows how Tailwind CSS uses a soft hyphen to indicate line breaks, with the hyphens-auto class automatically selecting line breaks over automatic hyphenation points.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
       Tailwind CSS Hyphens
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying hyphens-auto
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="hyphens-auto">
          This is a long word: ­ supercalifragilisticexpialidocious.
          This word should be automatihyphenated as the line break
          suggestion is used.
        </p>
  </div>
</body>

</html>
Print Page
Previous
Next