> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Texto

> Compone la tipografía del tema con truncamiento de una sola línea o un número limitado de líneas.

## Resumen

`Text` proporciona tipografía y control de desbordamiento. De forma predeterminada, representa un `div`. Omite `size`, `weight` y `color` para seguir heredando la tipografía del entorno.

**Light**

[Ejemplo de texto (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de texto (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--display)

## "Uso"

Asigne al texto un ancho restringido y, a continuación, establezca `truncate` para mostrar puntos suspensivos cuando se desborde:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const ContactName = () => (
  <Text truncate style={{ maxWidth: 160 }}>
    Alexandra Montgomery
  </Text>
);
```

## Elegir tipografía

`size` utiliza la escala de tema existente. Cambia el tamaño de fuente, sin valores predeterminados de altura, familia de fuentes ni interlineado:

| Tamaño | Valor del tema |
| - | - |
| `xxs` | `0.625rem` |
| `xs` | `0.85rem` |
| `sm` | `0.92rem` |
| `md` | `1rem` |
| `lg` | `1.23rem` |
| `xl` | `1.54rem` |
| `xxl` | `1.85rem` |

`weight` acepta `regular` (400), `medium` (500) o `semibold` (600). `color` acepta `primary`, `secondary`, `tertiary` o `light`. Cada prop omitida se hereda de forma independiente. El tamaño visual no cambia el elemento semántico.

**Light**

[Escala tipográfica de texto (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Escala tipográfica de texto (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--typography-catalog)

Para las leyendas, combina el tamaño pequeño, el grosor semibold y el color light:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Caption = () => (
  <Text size="xs" weight="semibold" color="light">
    Workspace
  </Text>
);
```

Usa el `style` nativo para colores en tiempo de ejecución y restricciones de diseño del elemento principal. Las clases del llamador y la composición de renderizado se aplican al mismo elemento de texto. Text no agrega valores predeterminados de tipografía cuando se omiten estas props.

## Limitar el número de líneas

**Light**

[Opciones de desbordamiento de texto (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opciones de desbordamiento de texto (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-text--catalog)

Use `lineClamp` con un número entero positivo. Elija `truncate` o `lineClamp`; sus props son mutuamente excluyentes.

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Summary = () => (
  <Text lineClamp={2} style={{ maxWidth: 240 }}>
    Follow up with the customer about their onboarding milestones and upcoming
    renewal.
  </Text>
);
```

## Elija un elemento

Use `render` cuando el texto necesite otro elemento semántico:

```tsx theme={null}
import { Text } from 'twenty-ui/primitives/typography';

export const Description = () => (
  <Text render={<p />}>Account description</Text>
);
```

El truncamiento afecta a la presentación visual; no acorta el texto en el DOM. Proporcione una forma de leer el contenido completo cuando la parte visible sea insuficiente.

## "Props"

Los atributos nativos, los elementos secundarios, las referencias, los nombres de clase y los estilos se aplican al elemento de texto renderizado. `TextProps` se exporta desde `twenty-ui/primitives/typography`. El contenido de texto se renderiza sin cambios, incluidos los enlaces proporcionados por quien realiza la llamada.

**color** `"light" | "primary" | "secondary" | "tertiary"`

Semantic text color. Omitted values inherit; native style supports runtime colors.

**lineClamp** `number`

Positive integer limiting the number of visible lines. Cannot be combined with `truncate`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the default div. Native props and the ref target the rendered text element.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"`

Font size from the theme scale. Omitted values inherit; this does not set height.

**truncate** `boolean`

Truncates one line with an ellipsis. Cannot be combined with `lineClamp`.

**weight** `"medium" | "regular" | "semibold"`

Theme font weight. Omitted values inherit.

## Migración

`color` ahora selecciona un color de tema semántico. Mueve los valores de color CSS arbitrarios de un atributo `color` nativo a `style={{ color: customColor }}`. Los estilos, las clases y la composición de renderizado existentes siguen aplicándose al elemento de texto.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.