Question

编辑：好的，所以我以错误的方式解决问题：做我想做的事情，我只需检查是否有溢出。

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

<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页面，但并非所有页面都有相同的内容。关于这一点，我想调整每个内容的字体大小以完全适应其范围;请注意，我不想剪切文本内容，或者如果它太长则添加点，我只想修改fontSize。

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>

正如您所看到的，我使用“for”来浏览每个跨度和“do ... while”来调整每个跨度的字体大小。

我的问题：

看起来我无法获得textcontent大小（取而代之的是“null”）
与fontsize相同（我得到一个空字符串）

或许我正在以错误的方式解决问题，我需要采用不同的方式...

NB ：JS对我来说有点“新”，如果我犯了菜鸟错误就很抱歉

Answer 1

您要按fontSize = fontSize - 1;重置本地变量，相关说明textHeight和textWidth不会通过更改fontsize自动更新，它们是本地变量。

另一方面，您需要将文本包装在一个附加元素中，以便能够测量其尺寸。

<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();
});

如何自动调整内容fontsize以适应其范围

1 个答案: