Question

How to automatically adjust content fontsize to fit its span

与此处相同的问题。我需要自动调整跨度以适合包装纸。但是取决于身高和体重，因为我有两行文字

我已经尝试过了，但是它只能在宽度上工作

function textfit(){
    var spans = document.body.getElementsByTagName("span");

    for(var i = 0, l = spans.length; i < l; i++){ 
        var span = spans[i];
        var font = window.getComputedStyle(span, null).getPropertyValue('font-size');    
        var fontSize = parseInt(font);

    do {
        span.style.fontSize = (fontSize --) + "px";
    } while (span.scrollHeight > span.clientHeight || span.scrollWidth > span.clientWidth);

    }
}

$(document).ready(function() {
    textfit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    span{
        display: inline-block;
        width: 200px;
        height: 100px;
        font-size: 100pt;       
    }
</style>
<body>
    <div>
        <span>SMALL</span>
        <span>MEEEEEEEEEEEEEDIUM</span>
        <span>HUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUGE</span>
    </div>
</body>

如何自动调整内容字体大小以适应其限制

0 个答案: