> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/bravo-tags/components/text-lines-and-truncation.md).

# Text Lines & Truncation

Text line and truncation features allow for the control of text display by limiting the number of lines shown and cutting off excess content with an ellipsis or another indicator.&#x20;

This is particularly useful in UI design where space is limited, such as displaying preview texts for news articles or product descriptions on shopping sites, or comments on social media.&#x20;

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Ft3KHITDDDYTTa0oPI31H%2FText%20lines%20%26%20truncation%20(2).jpg?alt=media&amp;token=72f892d4-b683-43f7-a771-256cdfff7418" alt=""><figcaption></figcaption></figure>

## 👉 The tags

**📍 Where to add the tag:** A text layer.

### **Text line**

Set a maximum line count for text. Any text over this limit gets cut off. The font size will remain unchanged.

```
[style:text-max-lines:<number>]
Example:
[style:text-max-lines:2]
```

### Truncate

Text truncation refers to the process of shortening text content. If text is truncated, it usually ends with three periods, called an ellipsis.

#### Clip

Using `clip` restricts text to a specific number of lines, truncating additional content without displaying an ellipsis "...".

```
[style:text-truncate:clip]
```

#### **Start**

The `start` parameter limits output by displaying only a specified number of lines from the end of the text, truncating the beginning. Additional text is omitted and replaced with an ellipsis "...".

```
[style:text-truncate:start]
```

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F0PNLGh8rsGcYSNxZSSDM%2FText%20lines%20%26%20truncation3.jpg?alt=media&amp;token=d6988c7a-623a-40a9-9343-e18f8523a042" alt=""><figcaption></figcaption></figure>

**End**

The `end` parameter shows only a limited number of lines from the start and hides the rest with an ellipsis "...".

```
[style:text-truncate:end]
```

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FZQOe6WkGu4rffZ8gVpHY%2FText%20lines%20%26%20truncation4.jpg?alt=media&amp;token=134f3568-d029-406c-ab84-b11392047243" alt=""><figcaption></figcaption></figure>

**Middle**

The `middle` setting shortens the text so that only a few lines from the beginning and end are shown. Anything in between is replaced with an elipsis "..." to show there's more not being displayed.

```
[style:text-truncate:middle]
```

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fhns8Ss6mtJnYRtY7LJGr%2FText%20lines%20%26%20truncation2.jpg?alt=media&amp;token=50c25894-7562-49a9-9460-4c50aad4c1ca" alt=""><figcaption></figcaption></figure>

## 🏷️ **How to add the tag**

1. Design a text layer component.
2. Paste the tag to the text layer.

## 💾 Example files

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/1359525349041220271>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.bravostudio.app/bravo-tags/components/text-lines-and-truncation.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
