If field contains lots of text, make font smaller?

Card Design
#1

Is there a script to make the font size of a field smaller if it contains a lot of text, but bigger if it is a single world or 3-4 words?
Thanks for the help!

#2

Hi,

you can use JavaScript to resize the text given a threshold.

<div id="fit"><span id="wrap" class="">{{Front}}</span></div>

<script>
(function(w, d) {
        var fit = d.getElementById("fit");
        var wrap = d.getElementById("wrap");
        fontFitResize(fit, wrap);
   
    function fontFitResize(fit, wrap, step = 0.5) {
        var currentSize;
        while(fit.offsetWidth < wrap.offsetWidth) {
            currentSize = parseFloat(w.getComputedStyle(wrap, null).getPropertyValue('font-size'));
            wrap.style.fontSize = (currentSize - step) + 'px';
            console.log(wrap.style.fontSize);
        }
    }
        
    })(window, document);
</script>
1 Like