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>
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>