fitty

fitty copied to clipboard

Current behavior

When applying overflow:hidden and text-overflow: ellipsis to the fitty element while setting the max-width of the fitty element to be the exact width of it's parent, the css ellipsis will kick in.

Expected behavior

Ideally when the max-width of the fitty element is the same as it's parent's width, the calculated font-size should not be causing ellipsis to work.

Demo

https://codesandbox.io/s/fitty-demo-forked-6ojp3z

Any kind of help is appreciated and thanks again for making this awesome tool 🎉

true, I think it would be best to set text-overflow to its default value on elements that are used with Fitty

I see your point, but what we're trying to achieve is to have a min font-size on the Fitty text, and when the font-size can't get any smaller (say 8px), the truncation will kick in and ellipsis the part that is out of the container.

But it seems that text-overflow: ellipsis; will causes the ellipsis to kick in even when it doesn't seems to be needed (when the last character is very close to the edge?) https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

I'll leave this issue open then.