如何自动调整内容字体大小以适合其跨度(How to automatically adjust con

编辑：好的，所以我走近这个问题的错误方式：做我意，我只是需要检查是否有溢出。

下面是代码（如果它可以帮助任何人）：

<script type="text/javascript">
 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>

旧文章：

我的问题很简单：我有很多跨度，但不是所有的HTML页面具有相同的内容。关于这一点，我要适应每个内容的字体大小，以适应其完美的跨度; 请注意，我不希望削减的TextContent，或加点，如果它太长了，我只是想修改的中文字体。

JS：

function = textfit(){
    var spans = document.body.getElementsByTagName("span");

    for(var i = 0, l = spans.length; i < l; i++){           
        var maxHeight = spans[i].offsetHeight;
        var maxWidth = spans[i].offsetWidth;           
        var textHeight = $(spans[i].textContent).height();
        var textWidth = $(spans[i].textContent).width();
        var fontSize = spans[i].style.fontSize;

        do {
            fontSize = fontSize - 1;
        } while (textHeight > maxHeight || textWidth > maxWidth);

    }
}

$(document).ready(function() {
    textfit();
});

HTML / CSS：

<style>
    span{
        display: inline-block;
        width: 100px;
        height: 100px;
        font-size: 20pt;       
    }
</style>
        ......
<body>
    <div>
        <span>SMALL</span>
        <span>MEEEEEEEEEEEEEDIUM</span>
        <span>HUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUGE</span>
    </div>
</body>

正如你可以看到，我使用的是“为”通过每一区间运行，一个“做......而”调整它们各自的字体大小。

我的问题：

它看起来像我不能得到的TextContent尺寸（得到一个“零”，而不是）
与字体大小相同的事情（我发现了一个空字符串）

或者，也许我接近问题的错误的方式，我需要以不同的方式做到这一点...

注意：JS都有点“新”，我很抱歉，如果我做了错误的菜鸟

你被正在重置一个局部变量fontSize = fontSize - 1; ，与此相关的， textHeight而textWidth不会自动改变字号更新，它们是局部变量。

在另一方面，你需要将你包裹在文本的附加元素，能够测量其尺寸。

<style>
    .wrapper{
        display: inline-block;
        width: 100px;
        height: 100px;
        font-size: 20pt;       
    }
</style>
        ......
<body>
    <div>
        <span class='wrapper'><span>SMALL</span></span>
        <span class='wrapper'><span>MEEEEEEEEEEEEEDIUM</span></span>
        <span class='wrapper'><span>HUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUGE</span></span>
    </div>
</body>

JS：

function = textfit(){
    var spans = document.body.getElementsByClassName("wrapper");

    for(var i = 0, l = spans.length; i < l; i++){ 
        var span = spans[i];
        var maxHeight = span.offsetHeight;
        var maxWidth = span.offsetWidth;           
        var fontSize = parseInt(span.style.fontSize);

        do {
            var textHeight = span.firstChild.offsetHeight();
            var textWidth = span.firstChild.offsetWidth();
            span.style.fontSize = (fontSize --)+"pt";
        } while (textHeight > maxHeight || textWidth > maxWidth);
        //PS I suggest a binary-search-like algorithm to save time

    }
}

$(document).ready(function() {
    textfit();
});