Javascript that automatically sets font-size on element so that text doesn't overflow? (autofit)

问题

You know what I mean? Like let's say we have:

<div style="width:100px;font-size:10px">Some Text</div>

But then we could also possibly have a much longer text string in that div, in that case I would want that div to have font-size:7px or whatever, so that the whole string fits without overflowing.

I'm sure there's already something like this written, I wouldn't want to reinvent this. Preferably a jQuery plugin?

Any suggestions would be appreciated! Thanks

回答1:

Based on an answer proposed in Nick's question:

$(function() {
    $(".shrinkByWidth").each(function() {
        var targetWidth = $(this).parent(':first').width();

        if (isNaN(parseInt($(this).css("font-size"))))
            $(this).css("font-size", '24px');

        while ($(this).width() > targetWidth) 
        {
            $(this).css("font-size", (parseInt($(this).css("font-size")) - 1) + 'px');
        }
    });
});

Works great for me!

来源：https://stackoverflow.com/questions/1178651/javascript-that-automatically-sets-font-size-on-element-so-that-text-doesnt-ove