# gpui: Add \`line_clamp\` to truncate text after a specified number of lines \(\#23058\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/706f7be5e79a44fc767dfbeadce1f390e7f43d9f)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 706f7be5e79a44fc767dfbeadce1f390e7f43d9f

Requested commit: 706f7be5e79a44fc767dfbeadce1f390e7f43d9f

Commit: 706f7be5e79a44fc767dfbeadce1f390e7f43d9f

Tree: 4ababd4652f6addc40b04b520621924bcdd7b86f

Author: Jason Lee

Committer: GitHub

## Message

````
gpui: Add `line_clamp` to truncate text after a specified number of lines (#23058)

Release Notes:

- N/A

Add this feature for some case we need keep 2 or 3 lines, but truncate.
For example the blog post summary.

- Added `line_clamp` method.
    Ref: https://tailwindcss.com/docs/line-clamp


## Break changes:

- Renamed `gpui::Truncate` to `gpui::TextOverflow` to match
[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).
- Update `truncate` style method to match [Tailwind
CSS](https://tailwindcss.com/docs/text-overflow) behavior:

    ```css
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    ```
<img width="538" alt="image"
src="https://github.com/user-attachments/assets/c69c4213-eac9-4087-9daa-ce7afe18c758"
/>


## Show case

<img width="816" alt="image"
src="https://github.com/user-attachments/assets/e0660290-8042-4954-b93c-c729d609484a"
/>

![CleanShot 2025-01-13 at 17 22
05](https://github.com/user-attachments/assets/38644892-79fe-4254-af9e-88c1349561bd)

## Describe changes

The [second
commit](https://github.com/zed-industries/zed/commit/6b41c2772f9d1c5f4efe69fe83206a14407af4d4)
for make sure text layout to match with the line clamp. Before this
change, they may wrap many lines in sometimes. And I also make
line_clamp default to 1 if we used `truncate` to ensure no wrap.

> TODO: There is still a tiny detail that is not easy to fix. This
problem only occurs in the case of certain long words. I will think
about how to improve it later. At present, this has some flaws but does
not affect the use.
````

## Parents

- [baac01cea47c4e4d3a51db373d2d8ba0525a9ff4](https://git.cafe/gitcafe/zed/commit/baac01cea47c4e4d3a51db373d2d8ba0525a9ff4?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/706f7be5e79a44fc767dfbeadce1f390e7f43d9f?format=markdown)