Treemap Diagram - truncate text

I want to finish the last details on my treemap ( https://codepen.io/juanrozo89/pen/dyKLWPG ), which include trimming the texts inside the tiles when needed. However, when running a “while” method in order to do this, one of the innerHTML is behaving differently from all others creating an infinite loop. I have no clue why this is.

Between lines 137 and 149 you can see my attempt at truncating the texts. I ran an iteration erasing all inneHTML so the problem with “Mario & Sonic” becomes clearly visible.

Thanks in advance for any help!

It appears that one fails because it is the only one with an ampersand and that gets transformed into an HTML entity which interferes with your one character at a time method. You can use a control variable and stop your while loop after so many iterations and log some values around it to see the problem (I used this technique). You may be able to find and handle either the ampersand or the entity in the string and work around the problem.

This is a non-trivial problem in general. Some help on other solutions may be found here or there and I’ve seen examples for D3 on observable.

Thanks a lot! This solved it