Word Break

Tailwind CSS Word Break

In Tailwind CSS, the word-break utility class allows you to control how words are broken and wrapped when they exceed the width of their container. You can use the break-{value} utility class to specify how words should be broken.

Normal

Use break-normal to only add line breaks at normal word break points.

The longest word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.

"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word, coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease caused by inhaling fine silica particles, a testament to English's rich roots and a challenge in pronunciation.

Read More...
<div class="w-full max-w-sm mx-auto rounded-xl p-8 bg-gray-50">
<h2 class="font-merriweather text-xl font-normal leading-8 text-gray-900 mb-4">The longest
word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.
</h2>
<p class="text-sm font-normal text-gray-500 mb-14">
"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word,
coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease
caused by inhaling fine silica particles, a testament to English's rich roots and a
challenge in pronunciation.
</p>
<a href="javascript:;" class="text-lg font-semibold text-indigo-600">Read More...</a>
</div>
                    

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Break Words

Use break-words to add line breaks mid-word if needed.

The longest word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.

"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word, coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease caused by inhaling fine silica particles, a testament to English's rich roots and a challenge in pronunciation.

Read More...
<div class="w-full max-w-sm mx-auto rounded-xl p-8 bg-gray-50">
<h2 class="font-merriweather text-xl font-normal break-words leading-8 text-gray-900 mb-4">The longest
word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.
</h2>
<p class="text-sm font-normal break-words text-gray-500 mb-14">
"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word,
coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease
caused by inhaling fine silica particles, a testament to English's rich roots and a
challenge in pronunciation.
</p>
<a href="javascript:;" class="text-lg font-semibold text-indigo-600">Read More...</a>
</div>

Break All

Use break-all to add line breaks whenever necessary, without trying to preserve whole words.

The longest word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.

"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word, coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease caused by inhaling fine silica particles, a testament to English's rich roots and a challenge in pronunciation.

Read More...
<div class="w-full max-w-sm mx-auto rounded-xl p-8 bg-gray-50">
<h2 class="font-merriweather text-xl font-normal break-all leading-8 text-gray-900 mb-4">The longest
word in any of the major English language: pneumonoultramicroscopicsilicovolcanoconiosis.
</h2>
<p class="text-sm font-normal break-all text-gray-500 mb-14">
"Pneumonoultramicroscopicsilicovolcanoconiosis" holds the title of English's longest word,
coined in the 1930s, rarely used but admired for its complexity. It describes a lung disease
caused by inhaling fine silica particles, a testament to English's rich roots and a
challenge in pronunciation.
</p>
<a href="javascript:;" class="text-lg font-semibold text-indigo-600">Read More...</a>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More