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

# Текст

> Настраивайте типографику темы с обрезкой в одну строку или ограниченным числом строк.

## Обзор

`Text` предоставляет типографику и обработку переполнения. По умолчанию он отображает `div`. Не указывайте `size`, `weight` и `color`, чтобы продолжать наследовать типографику от окружения.

**Light**

[Пример текста (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример текста (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)

## Использование

Задайте тексту ограниченную ширину, затем установите `truncate`, чтобы при переполнении отображалось многоточие:

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

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

## Выберите типографику

`size` использует существующую шкалу темы. Он изменяет размер шрифта без значений по умолчанию для высоты, font-family или line-height:

| Размер | Значение темы |
| - | - |
| `xxs` | `0.625rem` |
| `xs` | `0.85rem` |
| `sm` | `0.92rem` |
| `md` | `1rem` |
| `lg` | `1.23rem` |
| `xl` | `1.54rem` |
| `xxl` | `1.85rem` |

`weight` принимает `regular` (400), `medium` (500) или `semibold` (600). `color` принимает `primary`, `secondary`, `tertiary` или `light`. Каждый пропуск свойства наследуется независимо. Визуальный размер не изменяет семантический элемент.

**Light**

[Типографическая шкала текста (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--typography-catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Типографическая шкала текста (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)

Для подписей используйте малый размер, насыщенность semibold и светлый цвет:

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

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

Используйте нативный `style` для цветов во время выполнения и ограничений родительского макета. Классы вызывающего кода и композиция рендеринга нацелены на один и тот же текстовый элемент. При отсутствии этих свойств Text не добавляет типографические значения по умолчанию.

## Ограничение числа строк

**Light**

[Параметры переполнения текста (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-text--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Параметры переполнения текста (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)

Используйте `lineClamp` с положительным целым числом. Выберите `truncate` или `lineClamp`; эти свойства взаимоисключающие.

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

## Выберите элемент

Используйте `render`, когда для текста требуется другой семантический элемент:

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

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

Обрезка влияет на визуальное представление; она не сокращает текст в DOM. Предоставьте возможность прочитать полное содержимое, когда видимой части недостаточно.

## Свойства

Нативные атрибуты, дочерние элементы, refs, имена классов и стили применяются к отрисованному текстовому элементу. `TextProps` экспортируется из `twenty-ui/primitives/typography`. Текстовое содержимое отображается без изменений, включая ссылки, предоставленные вызывающей стороной.

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

## Миграция

`color` теперь выбирает семантический цвет темы. Перенесите произвольные значения цвета CSS из нативного атрибута `color` в `style={{ color: customColor }}`. Существующие стили, классы и композиция рендеринга по-прежнему нацелены на текстовый элемент.


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