Свойства текста

Список свойств

У элемента text для управления отображением текста используются свойства:

  • 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 — подчеркивание.

Приоритет цветов

При установке цвета текста применяется следующий приоритет:

  1. Цвет в диапазонах (range.text_color) имеет высший приоритет
  2. Градиент текста (text_gradient) применяется, если для диапазона не задан цвет
  3. Базовый цвет текста (text_color) применяется только если не заданы ни цвет диапазона, ни градиент

Это позволяет переопределять цвет для отдельных частей текста, используя градиент или базовый цвет для остального текста.

Посмотреть интерактивный пример

Обрезка текста

Когда текст выходит за ограничения по количеству строк, то он обрезается.

  • max_lines — максимальное количество строк, которые не будут обрезаны при выходе за ограничения.
  • min_hidden_lines — минимальное число обрезанных строк при выходе за ограничения.
  • ellipsis — маркер обрезки текста при выходе за ограничения.

По умолчанию будут добавлены три точки, но маркер обрезки можно предопределить через ellipsis.

Если общее число строк текста меньше или равно сумме max_lines + min_hidden_lines, то текст не обрезается. Если общее число строк текста больше суммы, то текст обрезается на max_lines строк.

Пример. Параметр max_lines = 3, а min_hidden_lines = 4. Общее число строк текста — 7. Текст не обрежется.

Применить свойство к части текста

Чтобы поменять форматирование только части текста, используйте свойства ranges и images:

  • images — указанный символ заменяется на картинку;
  • ranges — промежуток, на который надо применить указанное форматирование. Нужно указать начало (начиная с 0) и конец промежутка. Несколько range могут пересекаться, при этом будут применены указанные свойства для всех промежутков. Выделенную часть текста можно сделать кликабельной с помощью действий.

Посмотреть интерактивный пример

Например, с помощью свойства range в текстовом блоке новости можно применить одно форматирование для текста и другое — для названия источника

Посмотреть интерактивный пример

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Предыдущая
Свойства изображений
Следующая
Поле ввода