Truncated Text
Texte sur une seule ligne tronque avec des points de suspension lorsqu'il depasse une largeur maximale configurable. Installez Truncated Text depuis le registre VLLNT UI avec la CLI shadcn.
Texte sur une seule ligne tronque avec des points de suspension lorsqu'il depasse une largeur maximale configurable. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Truncated Text a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/truncated-text.jsonSource
import { cn } from "../../lib/utils";
export type TruncatedTextProps = {
/**
* The text content to display
*/
children: string;
/**
* Optional CSS class name
*/
className?: string;
/**
* Max width for the visible container (default: 'calc(100vw - 220px)')
*/
maxWidth?: string;
};
/**
* TruncatedText component with ellipsis for long text
*
* Displays text with ellipsis (...) when content overflows.
* On mobile, truncates within a constrained container.
* On desktop (≥640px), displays full text.
*
* @example
* ```tsx
* <TruncatedText>
* Production Claude Code Workflows
* </TruncatedText>
* ```
*/
export function TruncatedText({
children,
className,
maxWidth = "calc(100vw - 220px)",
}: TruncatedTextProps) {
return (
<span
className={cn(
"inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap sm:max-w-none sm:overflow-visible",
className,
)}
style={{
maxWidth,
}}
title={children}
>
{children}
</span>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.