text-overflow: <string> polyfill-ish

MDN says it's only currently supported on firefox 😭
...but as they say... if you can't make it, fake it! 😎

Demo with ?

averyveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstringwith?

averyveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstring?

but what if the string is short?

well... if it's short, it's short! there's nothing you can do about it... 🙄

Usage:

1. wrap the string in a <span>

2. add data-text-overflow="{whatever}" with the character you want to the <span>'s parent element (because you don't want the pseudo-element to be clipped along with the string)

3. the max-width can be defined somewhere up the tree, (e.g. a modal container)

4. this uses javascript (— "use the source Luke...")

5. run it when needed and attach it to a resize event listener if you want to make it...

   

6. in React useRef() 🥁 to target the element and then useState(), useEffect() hooks instead of classList.toggle()

that's it... if you don't like it... cry me a river on GitHub. I'll try to come up with something else later...