---
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/en/llms.txt

# Text properties

## List of properties {#text-properties}

The [text](https://divkit.tech/docs/en/concepts/divs/2/div-text.md) element uses the following properties to control text display:

- `font_size`: Size.
- `font_weight`: Weight.
- `font_variation_settings`: Fine-grained control over variable font characteristics.
- `text_color`: Color. Priority: applied only if neither `range.text_color` nor `text_gradient` are set.
- `text_gradient`: Gradient text color. Priority: applied if `range.text_color` is not set.
- `letter_spacing`: Spacing between letters. Can be positive (increases spacing) or negative (decreases spacing).
- `line_height`: Line height.
- `max_lines`: Maximum number of lines.
- `text_alignment_vertical`/`text_alignment_horizontal`: Alignment types.
- `strike`: Strikethrough.
- `underline`: Underline.

![](../_images/create-card/div-text.png =300x)

## Color priority {#color-priority}

When setting text color, the following priority is applied:

1. Color in ranges (`range.text_color`) has the highest priority
2. Text gradient (`text_gradient`) is applied if no color is set for the range
3. Base text color (`text_color`) is applied only if neither range color nor gradient is set

This allows you to override colors for specific parts of text while using gradient or base color for the rest.

{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/en/text_1_en.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


## Text cropping {#cut}

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

- `max_lines`: Maximum number of lines that won't be cropped when exceeding the limit.
- `min_hidden_lines`: Minimum number of cropped lines when exceeding the limit.
- `ellipsis`: Marker for cropping text when exceeding the limit.

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

{% note info %}

To create dynamic crop markers, you can use the `range_builder` and `image_builder` properties inside the `ellipsis` object. These properties work similarly to their counterparts at the top level of the text component and have priority over static `ranges` and `images` lists.

{% endnote %}

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.** Suppose `max_lines = 3` and `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 the text {#part}

To change the formatting of a part of a text, use the `ranges` and `images` properties or their dynamic counterparts `range_builder` and `image_builder`:

- `images`: Replace the specified character with an image. For images, you can set vertical alignment using the `alignment_vertical` property (supported values: `top`, `center`, `bottom`, `baseline`).
- `ranges`: Range for applying the specified formatting. 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](https://divkit.tech/docs/en/concepts/interaction.md).
- `range_builder` and `image_builder`: Dynamic builders that generate ranges and images from a data array. They have priority over static `ranges` and `images` lists. They work similarly to [item_builder](https://divkit.tech/docs/en/concepts/item_builder.md) — using `data`, `prototypes`, and `selector` to create elements.

![](../_images/create-card/range.png =300x)

{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/text_2.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


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.

![](../_images/create-card/range-news.png =300x)

{% cut "View an interactive example" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/en/text_3_en.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->