Overflow Wrap - 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 = "overflow-wrap"; export const description = "Utilities for controlling line breaks within words in an overflowing element.";

Examples

Wrapping mid-word

Use the wrap-break-word utility to allow line breaks between letters in a word if needed:

<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:wrap-break-word] -->
<p class="wrap-break-word">The longest word in any of the major...</p>

</Figure>

Wrapping anywhere

The wrap-anywhere utility behaves similarly to wrap-break-word, except that the browser factors in mid-word line breaks when calculating the intrinsic size of the element:

<Figure> <Example> { <div> wrap-break-word <div className="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-3 shadow-sm ring ring-black/2.5 dark:bg-black/10 dark:ring-white/10">

    <div className="wrap-break-word">
      <p className="text-sm font-medium text-gray-900 dark:text-white">Jay Riemenschneider</p>
      <p className="text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
    </div>
  </div>
  <p className="mt-8 mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
    wrap-anywhere
  </p>
  <div className="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-3 shadow-sm ring ring-black/2.5 dark:bg-black/10 dark:ring-white/10">
    
    <div className="wrap-anywhere">
      <p className="text-sm font-medium text-gray-900 dark:text-white">Jay Riemenschneider</p>
      <p className="text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
    </div>
  </div>
</div>

} </Example>

html

<!-- [!code classes:wrap-anywhere,wrap-break-word] -->
<div class="flex max-w-sm">
  
  <div class="wrap-break-word">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>[email protected]</p>
  </div>
</div>
<div class="flex max-w-sm">
  
  <div class="wrap-anywhere">
    <p class="font-medium">Jay Riemenschneider</p>
    <p>[email protected]</p>
  </div>
</div>

</Figure>

This is useful for wrapping text inside of flex containers, where you would usually need to set min-width: 0 on the child element to allow it to shrink below its content size.

Wrapping normally

Use the wrap-normal utility to only allow line breaks at natural wrapping points, like spaces, hyphens, and punctuation:

<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:wrap-normal] -->
<p class="wrap-normal">The longest word in any of the major...</p>

</Figure>

Responsive design