Text properties

List of properties

The text element uses the following properties to control text display:

  • font_size: Size.
  • font_weight: Weight.
  • text_color: Color.
  • letter_spacing: Spacing between letters.
  • line_height: Line height.
  • max_lines: Maximum number of lines.
  • text_alignment_vertical/text_alignment_horizontal: Alignment types.
  • strike: Strikethrough.
  • underline: Underline.
View an interactive example

Text cropping

Any text that goes outside the limit on the number of lines is cropped.

  • max_lines: The maximum number of lines that won't be cropped when exceeding the limit.
  • min_hidden_lines: The minimum number of cropped lines when exceeding the limit.
  • ellipsis: The marker for cropping text when exceeding the limits.

By default, three dots are used, but the crop marker can be predefined via ellipsis.

If the total number of text lines is less than or equal to the sum of max_lines + min_hidden_lines, the text isn't cropped. If the total number of text lines exceeds this sum, the text is cropped to max_lines lines.

Example. Parameter max_lines = 3 and parameter min_hidden_lines = 4. The total number of text lines is 7. The text won't be cropped.

Applying a property to a part of a text

To change the formatting of a part of a text, use the ranges and images properties:

  • images: The specified symbol is replaced with an image.
  • ranges: The range that the specified formatting is applied to. You need to specify the start (starting from 0) and the end of the range. Multiple ranges can overlap, and the specified properties will be applied to all the ranges. You can make a selected part of the text clickable using actions.
View an interactive example

For example, you can apply one formatting to the text and another one to the source name using the range property in the news text block.

View an interactive example

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository