Rax
KPCKevin Powell - Community
•Created by Rax on 4/30/2024 in #front-end
How to truncate text with ellipsis in the middle based on container width?
Hi all! As the title states I want to truncate a long breadcrumb like text in the middle with ellipsis. ex
Foo > Bar > ... > Baz . I have a solution by using a Resize observer on the element and then measuring the string size based on the font using canvas and then I truncate appropriately and update the elements textContent. This all works fine but I am afraid when I have a large list of these items that all need to be truncated I will have performance issues. So I was hoping someone here knows a better way to solve this.
Markup is a list of possibly long text to truncate
7 replies