# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/word-break.mdx

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.";

<ApiTable
  rows={[
    ["break-normal", "word-break: normal;"],
    ["break-all", "word-break: break-all;"],
    ["break-keep", "word-break: keep-all;"],
  ]}
/>

## Examples

### Normal

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

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal text-gray-900 dark:text-gray-200">
      The longest word in any of the major English language dictionaries is{" "}
      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> 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.
    </p>
  }
</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}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-all text-gray-900 dark:text-gray-200">
      The longest word in any of the major English language dictionaries is{" "}
      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> 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.
    </p>
  }
</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}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-keep text-gray-900 dark:text-gray-200">
      抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。
      <span className="font-bold">这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人，</span>{" "}
      他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。
    </p>
  }
</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

<ResponsiveDesign element="p" property="word-break" defaultClass="break-normal" featuredClass="break-all" />