search

davatron5000 / FitText.js

A jQuery plugin for inflating web type
http://fittextjs.com
6.76k stars 1.39k forks source link

Infinite shrink #89

Closed SephVelut closed 10 years ago

SephVelut commented 10 years ago

I've made a video of a problem I keep havng with fittext. Not sure how to describe it other than text infinitely shrinks into a singularity when resizing and I have the preset set to default (1.2)

$('.call-header span').fitText();

video - > http://d.pr/v/tpQk

davatron5000 commented 10 years ago

Cannot debug without a reduced test case. This is clearly outlined in outlined in our Issue Submission Guidelines

SephVelut commented 10 years ago

I've reproduced the issue on codepen with the bare minimum.

http://codepen.io/SephVelut/pen/phrFu

Browsers tried with same result: Safari, Chrome, Firefox.

davatron5000 commented 10 years ago

https://github.com/davatron5000/FitText.js#css-faq

In the CSS FAQ on the readme we note that inline elements (like span) don't have width, so you can't calculate a ratio. You'll need to use display: block or display: inline-block to fix.

SephVelut commented 10 years ago

display: block works but display: inline-block does not without setting a width on the span element. But thats not a Fittext issue of course. Thanks for help btw.

davatron5000 commented 10 years ago

You'll need a width (display block defaults to width: 100%). For your specific situation, I'd probably pad the div on the left, and absolutely position your static unchanging text ("Call").

That's as far as I can help you on this. I think grok it out some more. You're probably pretty close.

SephVelut commented 10 years ago

Thanks, yeah I think I can take it from here.