Truncate

Truncate is component that will dynamically clamp the text to the available space.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt atque, officia temporibus a voluptatum enim sed voluptates, quibusdam quia voluptatibus, quod quos. Quisquam, quae. Quisquam, quae. Quisquam, quae.

import { Truncate } from "swash/Truncate";

() => {
    return (
        <div className="flex h-24 w-full flex-col gap-2">
            <Truncate className="text-2xl">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt atque,
                officia temporibus a voluptatum enim sed voluptates, quibusdam quia
                voluptatibus, quod quos. Quisquam, quae. Quisquam, quae. Quisquam, quae.
            </Truncate>
            <div className="h-8 w-full bg-primary-bg shrink-0" />
        </div>
    );
};

Usage

The component accepts the following props:

className: Additional classes to add to the div element that wraps the text.
children: The text to clamp.
maxLineClamp: (optional) The maximum number of lines to clamp the text to. Defaults to 1.

Finally, the component accepts all the props that the span element accepts.

It returns a span element with the clamped text in a span.

Max line clamp

Use maxLineClamp to set the maximum number of lines to clamp the text to.

Even if the text has enough space to fit in more lines, it will be clamped to the specified number of lines.

import { Truncate } from "swash/Truncate";

() => {
    return (
        <div className="flex h-40 w-full flex-col gap-2 justify-between">
            <Truncate className="text-2xl" maxLineClamp={2}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt atque,
                officia temporibus a voluptatum enim sed voluptates, quibusdam quia
                voluptatibus, quod quos. Quisquam, quae. Quisquam, quae. Quisquam, quae.
            </Truncate>
            <div className="h-8 w-full bg-primary-bg shrink-0" />
        </div>
    );
};