I work for Memfault, where we create developer tools for firmware developers. With one simple property we can clean this up.
TEXT OVERFLOW ELLIPSIS HOW TO
Here’s some nice documentation from MDN about the text-overflow property which is well worth the read. How to Handle Text Overflow (with a CSS Ellipsis) Text Overflow (with a CSS Ellipsis).
Did you add the overflow: hidden property to the child?.Did you add the white-space: nowrap property to the child?.Does the child also have a computed size determined by your CSS, or does it inherit one?.It isn't there to facilitate empathy with the User - it's there to facilitate empathy with the Designer it's there to ensure that nothing breaks the 'aesthetic of the design,' even at the cost of clarity. Here’s a cool trick to handle text overflow by truncating long strings with a CSS ellipsis.