Text

Elemento <p> que renderiza el string content con recorte de múltiples líneas mediante CSS -webkit-line-clamp. Cuando se define maxLines y el contenido desborda, el texto se trunca con elipsis (o con clip si showEllipsis es false).

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | content | string | Sí | — | El string de texto a renderizar. | | maxLines | number | No | — | Número máximo de líneas antes del truncado. Sin este prop no se aplica recorte. | | showEllipsis | boolean | No | true | Cuando es true y maxLines está definido, el texto desbordante se corta con …. | | color | string | No | — | Color CSS del texto. | | style | React.CSSProperties | No | — | Estilos en línea del elemento párrafo. |

Uso

Básico

import Text from '@/components/Text';

export default function Example() {
  return <Text content="Este es un párrafo simple de texto." />;
}

Recortado a 2 líneas

import Text from '@/components/Text';

export default function Example() {
  return (
    <Text
      content="Esta es una descripción muy larga que debería truncarse luego de dos líneas de contenido visible para mantener el diseño consistente."
      maxLines={2}
    />
  );
}

Color y estilo personalizados

import Text from '@/components/Text';

export default function Example() {
  return (
    <Text
      content="Descripción del producto."
      color="#7f8c8d"
      style={{ fontSize: 14, lineHeight: 1.6 }}
      maxLines={3}
    />
  );
}