text-overflow.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"; import dedent from "dedent";

export const title = "text-overflow"; export const description = "Utilities for controlling how the text of an element overflows.";

<ApiTable rows={[ [ "truncate", dedentoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;, ], ["text-ellipsis", "text-overflow: ellipsis;"], ["text-clip", "text-overflow: clip;"], ]} />

Examples

Truncating text

Use the truncate utility to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed:

{

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.

}

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

Adding an ellipsis

Use the text-ellipsis utility to truncate overflowing text with an ellipsis (…) if needed:

{

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.

}

<!-- [!code classes:text-ellipsis] -->
<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

Clipping text

Use the text-clip utility to truncate the text at the limit of the content area:

{

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.

}

<!-- [!code classes:text-clip] -->
<p class="overflow-hidden text-clip">The longest word in any of the major...</p>

This is the default browser behavior.

Responsive design