> ## 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.

# Testo

> Componi la tipografia del tema con troncamento su una singola riga o un numero limitato di righe.

## Panoramica

`Text` fornisce la tipografia e la gestione dell'overflow. Per impostazione predefinita, esegue il rendering di un `div`. Ometti `size`, `weight` e `color` per continuare a ereditare la tipografia dall'ambiente circostante.

**Light**

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

**Dark**

[Esempio di testo (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)

## Utilizzo

Assegna al testo una larghezza vincolata, quindi imposta `truncate` per mostrare un'ellissi quando va in overflow:

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

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

## Scegli la tipografia

`size` utilizza la scala del tema esistente. Modifica la dimensione del carattere, senza valori predefiniti per altezza, font-family o line-height:

| Dimensione | Valore del tema |
| - | - |
| `xxs` | `0.625rem` |
| `xs` | `0.85rem` |
| `sm` | `0.92rem` |
| `md` | `1rem` |
| `lg` | `1.23rem` |
| `xl` | `1.54rem` |
| `xxl` | `1.85rem` |

`weight` accetta `regular` (400), `medium` (500) o `semibold` (600). `color` accetta `primary`, `secondary`, `tertiary` o `light`. Ogni prop omessa viene ereditata in modo indipendente. La dimensione visiva non modifica l'elemento semantico.

**Light**

[Scala tipografica del testo (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Scala tipografica del testo (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)

Per le didascalie, componi la dimensione piccola, il peso semibold e il colore light:

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

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

Utilizza `style` nativo per i colori in fase di runtime e i vincoli di layout del genitore. Le classi chiamanti e la composizione di rendering sono destinate allo stesso elemento di testo. Text non aggiunge valori tipografici predefiniti quando queste prop sono omesse.

## Limita il numero di righe

**Light**

[Opzioni di overflow del testo (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opzioni di overflow del testo (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)

Usa `lineClamp` con un numero intero positivo. Scegli `truncate` o `lineClamp`; le rispettive props si escludono a vicenda.

```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>
);
```

## Scegli un elemento

Usa `render` quando il testo richiede un altro elemento semantico:

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

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

Il troncamento influisce sulla presentazione visiva; non abbrevia il testo nel DOM. Fornisci un modo per leggere il contenuto completo quando la parte visibile è insufficiente.

## Props

Gli attributi nativi, gli elementi figlio, i ref, i nomi delle classi e gli stili hanno come destinazione l'elemento di testo renderizzato. `TextProps` viene esportato da `twenty-ui/primitives/typography`. Il contenuto di testo viene renderizzato senza modifiche, inclusi i link forniti dal chiamante.

**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.

## Migrazione

`color` ora seleziona un colore semantico del tema. Sposta i valori arbitrari dei colori CSS da un attributo `color` nativo a `style={{ color: customColor }}`. Gli stili, le classi e la composizione di rendering esistenti continuano a essere destinati all'elemento di testo.


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