--- metadata: - name: generator content: Diplodoc Platform v5.50.3 alternate: - https://divkit.tech/docs/en/concepts/text.md - https://divkit.tech/docs/ru/concepts/text.md --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt # Свойства текста ## Список свойств {#text-properties} У элемента [text](https://divkit.tech/docs/ru/concepts/divs/2/div-text.md) для управления отображением текста используются свойства: - `font_size` — размер; - `font_weight` — начертание; - `font_variation_settings` — точный контроль характеристик вариативных шрифтов; - `text_color` — цвет. Приоритет: применяется только если не заданы ни `range.text_color`, ни `text_gradient`; - `text_gradient` — градиентный цвет текста. Приоритет: применяется, если `range.text_color` не задан; - `letter_spacing` — расстояние между буквами. Может быть положительным (увеличивает расстояние) или отрицательным (уменьшает расстояние); - `line_height` — выста строки; - `max_lines` — максимальное количество строк; - `text_alignment_vertical`/`text_alignment_horizontal` — типы выравнивания; - `strike` — зачеркивание; - `underline` — подчеркивание. ![](../_images/create-card/div-text.png =300x) ## Приоритет цветов {#color-priority} При установке цвета текста применяется следующий приоритет: 1. Цвет в диапазонах (`range.text_color`) имеет высший приоритет 2. Градиент текста (`text_gradient`) применяется, если для диапазона не задан цвет 3. Базовый цвет текста (`text_color`) применяется только если не заданы ни цвет диапазона, ни градиент Это позволяет переопределять цвет для отдельных частей текста, используя градиент или базовый цвет для остального текста. {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Обрезка текста {#cut} Когда текст выходит за ограничения по количеству строк, то он обрезается. - `max_lines` — максимальное количество строк, которые не будут обрезаны при выходе за ограничения. - `min_hidden_lines` — минимальное число обрезанных строк при выходе за ограничения. - `ellipsis` — маркер обрезки текста при выходе за ограничения. По умолчанию будут добавлены три точки, но маркер обрезки можно предопределить через `ellipsis`. {% note info %} Для создания динамических маркеров обрезки можно использовать свойства `range_builder` и `image_builder` внутри объекта `ellipsis`. Эти свойства работают аналогично их аналогам на верхнем уровне текстового компонента и имеют приоритет над статическими списками `ranges` и `images`. {% endnote %} Если общее число строк текста меньше или равно сумме `max_lines` + `min_hidden_lines`, то текст не обрезается. Если общее число строк текста больше суммы, то текст обрезается на `max_lines` строк. > **Пример.** Параметр `max_lines = 3`, а `min_hidden_lines = 4`. Общее число строк текста — 7. Текст не обрежется. ## Применить свойство к части текста {#part} Чтобы поменять форматирование только части текста, используйте свойства `ranges` и `images` или их динамические аналоги `range_builder` и `image_builder`: - `images` — указанный символ заменяется на картинку. Для изображений можно задать вертикальное выравнивание с помощью свойства `alignment_vertical` (поддерживаемые значения: `top`, `center`, `bottom`, `baseline`); - `ranges` — промежуток, на который надо применить указанное форматирование. Нужно указать начало (начиная с 0) и конец промежутка. Несколько `range` могут пересекаться, при этом будут применены указанные свойства для всех промежутков. Выделенную часть текста можно сделать кликабельной с помощью [действий](https://divkit.tech/docs/ru/concepts/interaction.md); - `range_builder` и `image_builder` — динамические билдеры, которые генерируют диапазоны и изображения из массива данных. Имеют приоритет над статическими списками `ranges` и `images`. Работают аналогично [item_builder](https://divkit.tech/docs/ru/concepts/item_builder.md) — используют `data`, `prototypes` и `selector` для создания элементов. ![](../_images/create-card/range.png =300x) {% cut "Посмотреть интерактивный пример" %} {% endcut %} Например, с помощью свойства `range` в текстовом блоке новости можно применить одно форматирование для текста и другое — для названия источника ![](../_images/create-card/range-news.png =300x) {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)