javascript - 文本自动字体大小

Question

我有一个标题的 div 标签，如下所示，它可能是多行的，我希望文本尽可能大以整齐地放入框中。感谢您的任何想法。

<div id="main" style="width:700px; height:165px; float:left; font-size:50px; text-align:center; font-family:Chiller;"><?php echo $title ?></div>

Answer 1

我不会为您编写代码，但我相信您可以使用 javascript 或 jQuery 来完成。你想设置你在那里编码的 div 的 overflow 属性。并且您想要在已有的 div 中为标题文本创建一个单独的 div。然后使用 javascript 你可以检查内部 div 的高度是否大于外部 div 的高度。我没试过，但像这样:

<div id="main" style="width:700px; height:165px; float:left; font-size:50px; text-align:center; font-family:Chiller; overflow:hidden;">
    <div id="title"> 
        <?php echo $title ?> 
    </div>
</div>

然后在 javascript 中，您只需检查 title 的高度或宽度是否大于 main 的高度或宽度。如果是，则减小字体大小并再次检查直到适合为止。在获得正确的字体大小之前，我可能会隐藏标题 div。

这篇文章也可能有所帮助:http://objectmix.com/javascript/112045-check-overflow-div.html