Question

需要一个解决方案来自动调整固定大小的容器中的文本。填充容器时，单个单词应该显得非常大。字符串越长，字体变得越小，以适应一行。

我找到的代码（见下文）几乎就在那里但由于某种原因将文本包装到第二行。关于如何修复它的任何建议，无论文本字符串调整多长时间，并且只是一行文本？

由于

<html>
<head>
<style type="text/css">
    #dynamicDiv
    {
    background: #CCCCCC;
    width: 240px;
    height: 64px;
    font-size: 64px;
    overflow: hidden;
    }
</style>

<script type="text/javascript">
    function shrink()
    {
        var textSpan = document.getElementById("dynamicSpan");
        var textDiv = document.getElementById("dynamicDiv");

        textSpan.style.fontSize = 64;

        while(textSpan.offsetHeight > textDiv.offsetHeight)
        {
            textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
        }
    }
</script>

</head>
<body onload="shrink()">
    <div align='center' id="dynamicDiv"><span id="dynamicSpan">Here is a string of text I want on just one line</span></div>
</body>
</html>

Answer 1

此代码有效，但我使用的是一个小jQuery，我希望这会有所帮助......

<style type="text/css">
    #container {
        height:100px;
        background-color:#eeeeee;
        text-align:center;
        font-family:Myriad Pro;
    }
<style>

<div id="container">01234567890123456789</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        var w = parseInt($("#container").width());
        var l = parseInt($("#container").html().length);
        var fontSize = ( (w / l) * 2 ) - 2;        
            fontSize = fontSize+'px';

        $("#container").css('font-size', fontSize);
    });
</script>

自动调整文本以仅使用HTML填充固定大小的容器

1 个答案: