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