Truncate

Typography

Text truncation with expand on click.

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Usage

example.jsx

import { Truncate } from "@/components/ui/truncate";

export default function Example() {
  return <Truncate />;
}

Source Code

Copy this file into components/ui/truncate.jsx in your project.

truncate.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Truncate = forwardRef(({ className, lines = 1, ...props }, ref) => (
  <div ref={ref}
    className={cn(
      lines === 1 && "truncate",
      lines > 1 && "overflow-hidden",
      className
    )}
    style={lines > 1 ? { display: "-webkit-box", WebkitLineClamp: lines, WebkitBoxOrient: "vertical" } : undefined}
    {...props}
  />
));
Truncate.displayName = "Truncate";

export { Truncate };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge