@Josh this is already solved since Figma added the Truncate text option.
Sorry for tagging you, not sure how to solve issues, and you are the only one I’ve found in the neighboring issues…
Great feature but it doesn’t work on “Text align justify”
1 Like
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
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
