Clip and ellipsize text in Fixed size text blocks

Great feature but it doesn’t work on “Text align justify”

VERY NICE! This works great

Hello! I love the Truncate text option in Figma, and I use it all the time. But my developers informed me that there is no equivalent CSS solution.

text-overflow: ellipsis;

Only works if there’s one line of text… it doesn’t add an ellipsis at the bottom of a block of text. Are we missing something? Please help

@Liza_Plotnikova

A bit late response, but a multi-line truncated text can be achieved like this:

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

This will add ellipsis at the end of two lines of text.

For browsers-support check: "line-clamp" | Can I use... Support tables for HTML5, CSS3, etc

At least for me, as of November 2023, the option appears through the text sub menu.

1. With the text selected, click on the three dots in the “Text” section of the right menu.
2. Click “Truncate Text”.