Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fitty calculate font-size will cause text to be ellipsed when using text-overflow: ellipsis #83

Open
tkforce opened this issue Jun 30, 2022 · 3 comments

Comments

@tkforce
Copy link

tkforce commented Jun 30, 2022

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 🎉

@rikschennink
Copy link
Owner

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

@tkforce
Copy link
Author

tkforce commented Jul 4, 2022

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

@rikschennink
Copy link
Owner

I'll leave this issue open then.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants