0

需要一种解决方案来在固定大小的容器中自动调整文本大小。一个单词应该看起来非常大，充满了容器。字符串越长，字体就越小，因为它会调整大小以适应一行。

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

谢谢

<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>
4

1 回答 1

0

这段代码有效，但我使用的是一点 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>
于 2013-05-31T07:47:35.913 回答