Tailwind CSS - Word Break

Previous
Quiz
Next

Tailwind CSS Word Break includes predefined classes that manage how words and long URLs wrap and display within text elements on web pages.

Tailwind CSS Word Break Classes

Below is a list of Tailwind CSS Word Break classes with properties to control how words wrap and handle long words and URLs in text.

Class CSS Properties
break-normal overflow-wrap: normal;
word-break: normal;
break-words overflow-wrap: break-word;
break-all word-break: break-all;
break-keep word-break: keep-all;

Functionality Of Tailwind CSS Word Break Classes

  • break-normal: This class is used to break text flow at specific points or spaces.
  • break-words: This class is used to ensure that long words are properly broken and wrapped onto the next line when they exceed the container's width.
  • break-all: This class is used to enable words to break at any character point within the container's width.
  • break-keep: This class is used to maintain the order of character sequences without causing them to break apart.

Tailwind CSS Word Break Class Examples

Below are examples of Tailwind CSS Word Break classes that show how to control the behavior of word wrapping and the handling of long words and URLs within text elements.

Managing Text Flow

This example shows Tailwind CSS's break-normal class, which allows text to wrap normally within its container. It ensures that text breaks at spaces or allowed points, maintaining a natural flow without forcibly breaking long words.

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 Word Break 
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying break-normal
    </h3> 
    <div class="bg-gray-200 max-w-xs"> 
      <p class="break-normal">
        This is a normal text wrapping example
        using Tailwind CSS. The text should wrap 
        normally within the container, breaking 
        at spaces or allowed points.
      </p>
    </div>
</body>

</html>

Handling Long Words

This example shows Tailwind CSS's break-words class, which allows long words to break and wrap within their container. It ensures that lengthy words or URLs do not overflow beyond their designated space.

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 Word Break 
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying break-words
    </h3> 
    <div class="bg-gray-200 max-w-xs"> 
        <p class="break-words">
            Thisisaverylongwordthatshouldbebrokenintomultiplelines.
        </p>
    </div>
</body>

</html>

Enhancing Text Display

This example shows how the Tailwind CSS Word break class uses the break-all class to enable text to break at any character point within its container.

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 Word Break 
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying break-all
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="break-all">
            Thisisaverylongwordthatshouldbebrokenatanycharacterpoint.
        </p>
    </div>
</body>

</html>

Preserving Text Sequence

This example shows Tailwind CSS's break-keep class, which ensures that long words or sequences of text remain unbroken and displayed as one continuous unit within their container.

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 Word Break 
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying break-keep
    </h3> 
    <div class="bg-gray-200 max-w-xs">  
        <p class="break-keep">
            Thisisaverylongwordthatshouldnotbebrokenintomultiplelines
            and should remainas one continuous sequence.
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next