Text

A <p> element that renders string content with optional multi-line clamping via CSS -webkit-line-clamp. When maxLines is set and the content overflows, the text is truncated with an ellipsis (or clipped if showEllipsis is false).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | content | string | Yes | — | The text string to render. | | maxLines | number | No | — | Maximum number of lines before truncation. When omitted, no clamping is applied. | | showEllipsis | boolean | No | true | When true and maxLines is set, overflowing text is cut with …. Set to false for hard clip. | | color | string | No | — | CSS color applied to the text. | | style | React.CSSProperties | No | — | Inline styles merged into the paragraph element. |

Usage

Basic

import Text from '@/components/Text';

export default function Example() {
  return <Text content="This is a simple paragraph of text." />;
}

Clamped to 2 lines

import Text from '@/components/Text';

export default function Example() {
  return (
    <Text
      content="This is a very long description that should be truncated after two lines of visible content so that the layout remains consistent."
      maxLines={2}
    />
  );
}

Custom color and style

import Text from '@/components/Text';

export default function Example() {
  return (
    <Text
      content="Product description goes here."
      color="#7f8c8d"
      style={{ fontSize: 14, lineHeight: 1.6 }}
      maxLines={3}
    />
  );
}