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

<ApiTable rows={[ [ "truncate", dedent overflow: 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:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs truncate border-x border-x-pink-400/30 py-8 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> </Figure>

Adding an ellipsis

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

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs overflow-hidden border-x border-x-pink-400/30 py-8 text-ellipsis 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> </Figure>

Clipping text

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

<Figure> <Example padding={false}> { <p className="mx-auto max-w-xs overflow-hidden border-x border-x-pink-400/30 py-8 text-clip 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> </Figure>

This is the default browser behavior.

Responsive design

<ResponsiveDesign element="p" property="text-overflow" defaultClass="text-ellipsis" featuredClass="text-clip" />