Tailwind Word Break

The word-break utility class in Tailwind CSS allows you to control the breaking behavior of long words and strings within elements. With Tailwind's word-break class, you can easily modify how words and strings wrap and break to fit within their containing elements.

Applying Tailwind Word Break

To apply a specific word breaking behavior to an element, you can use the break-{value} utility class, where {value} represents the desired word break behavior. Here are some common values you can use:

• break-normal: Allows normal word breaking behavior, where long words and strings can break between any two characters.
• break-words: Breaks long words and strings at arbitrary points to prevent overflow within the container.
• break-all: Breaks long words and strings at any character, regardless of whether it's a space or not.

<p class="break-normal">
  This is a long word: supercalifragilisticexpialidocious.
</p>

Preview

Responsive Word Break

Tailwind CSS allows you to apply word break classes responsively at different breakpoints. To use responsive word break classes, you can append the breakpoint prefix to the utility class. For example, md:break-all sets the word breaking behavior to break long words at any character starting from the medium breakpoint and above.

<p class="break-normal md:break-all">
  This is a normal word break by default, but starting from the medium
  breakpoint and above, it will break long words at any character.
</p>

Preview

In the above example, the word breaking behavior of the <p> element is set to normal by default (break-normal), but starting from the medium breakpoint and above, it changes to break long words at any character (md:break-all).

Tailwind CSS Word Break

Windframe Tailwind blocks

landing page