How to Wrap Text in Tailwind CSS?

Text Wrapping in Tailwind CSS

To wrap text, you can use the whitespace utility class in combination with other classes.

Here's an example of how you can use the whitespace class to control text wrapping:

<p class="... whitespace-normal">Your text goes here</p>

In the example above, the whitespace-normal class specifies that the text should wrap normally, breaking at appropriate intervals. You can replace whitespace-normal with other options such as whitespace-no-wrap, whitespace-pre, and whitespace-pre-line to achieve different text wrapping behaviors.

Controlling Line Breaks

Tailwind CSS also provides classes to control line breaks within your text.

For instance, the break-words class allows words to be broken and wrapped onto the next line when necessary.

Here's how you can use it:

<p class="w-1/5 break-words">
  Long words like 'supercalifragilisticexpialidocious' will be wrapped.
</p>

By applying the break-words class, you ensure that lengthy words don't disrupt the layout of your content.

Handling Overflow

In some cases, you might want to handle overflow when dealing with text wrapping. The overflow-ellipsis class is particularly useful when you want to truncate overflowing text and display an ellipsis to indicate that there's more content.

Here's an example:

<p class="... overflow-ellipsis">
  This text is too long to fit in its container and will be truncated.
</p>

The overflow-ellipsis class ensures that your content remains visually tidy, even when dealing with limited space.

Responsive Text Wrapping

Tailwind CSS excels at creating responsive designs, and text wrapping is no exception.

You can apply different text wrapping behaviors based on screen sizes using the responsive design classes.

For instance, you can use the sm, md, lg, and xl prefixes to target specific breakpoints.

Here's an example of responsive text wrapping:

<p class="sm:whitespace-no-wrap ... whitespace-normal md:whitespace-pre">
  Your responsive text goes here
</p>