Ellipsis

Component

About

A text wrapper that truncates overflow with a single-line ellipsis or clamps a paragraph to a fixed number of lines.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ellipsis to your project and fits it to your theme.

Code

How Ellipsis is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Ellipsis } from "@/components/ui/ellipsis";

export default function EllipsisLinesDemo() {
  const prose =
    "The vessel holds the page the way a column holds ink: fully, and only up to its brim. " +
    "Whatever runs past the measure gives way, and the cut is drawn so quietly that the reader " +
    "finishes the sentence from memory instead of the margin.";

  return (
    <div className="flex w-full items-center justify-center bg-background p-8 text-foreground">
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "var(--bs-space-4)",
          maxWidth: "40rem",
        }}
      >
        <Ellipsis lines={2}>{prose}</Ellipsis>
        <Ellipsis lines={4}>{prose}</Ellipsis>
      </div>
    </div>
  );
}