Word Break - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "word-break"; export const description = "Utilities for controlling word breaks in an element.";

Examples

Normal

Use the break-normal utility to only add line breaks at normal word break points:

<Figure> <Example padding={false}> { The longest word in any of the major English language dictionaries is{" "} pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. } </Example>

html

<!-- [!code classes:break-normal] -->
<p class="break-normal">The longest word in any of the major...</p>

</Figure>

Break All

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

<Figure> <Example padding={false}> { The longest word in any of the major English language dictionaries is{" "} pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. } </Example>

html

<!-- [!code classes:break-all] -->
<p class="break-all">The longest word in any of the major...</p>

</Figure>

Break Keep

Use the break-keep utility to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text:

<Figure> <Example padding={false}> { 抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。 这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人，{" "} 他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。 } </Example>

html

<!-- [!code classes:break-keep] -->
<p class="break-keep">抗衡不屈不挠...</p>

</Figure>

For non-CJK text the break-keep utility has the same behavior as the break-normal utility.

Responsive design