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 = 3and parametermin_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. Multiplerangescan 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