Clamp Text

Multiline text truncation

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis autem quis qui nam excepturi libero laudantium rerum earum illo illum, quisquam iure aperiam ipsam corporis inventore voluptas dignissimos obcaecati modi! Voluptate nesciunt quibusdam sit? Nobis possimus harum laboriosam iste facilis quas. Minus quod corporis recusandae assumenda nobis architecto deleniti obcaecati ad, ipsam pariatur facere odit possimus voluptatibus nostrum? Magnam, eum.

View source

Anatomy

import { ClampText } from "@lualtek/react-components";
 
export default () => {
  return <ClampText rows={3}>...</ClampText>;
};

API Reference

export type ClampTextProps = {
  /**
   * Define how many lines the text should be clamped to.
   * @default 1
   */
  rows?: number;
 
  /**
   * Put the text as inline element instead of block.
   */
  inline?: boolean;
 
  /**
   * Set the component to render as different element
   * @default 'span'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};

Tabs Gradient Text