在固定大小的 div 中调整文本大小以适应答案

【问题标题】：Resize text in a fixed size div to fit在固定大小的 div 中调整文本大小以适应
【发布时间】：2013-07-31 09:17:21
【问题描述】：

我有一个<div>，它宽 400 像素，高 100 像素。我想在其中放置一个长度不同的标题，如果它足够长，它将在<div> 中占据两行（即<div> 的默认字体大小为50px）。我想让文本从 50px 开始，如果文本太长而无法放入两行的框中，则让它缩小。

我该怎么做？我一直在玩 Javascript 几个小时，但我无法想出或找到任何东西。我能找到的只是如何对一行文本执行此操作。

【问题讨论】：

向我们展示您一直在尝试的代码？？
试图理解：您是否想要一个具有固定高度和文本垂直对齐 1 行和 2 行的标题？
请同时显示一些您一直在尝试的代码
试试这个：w3schools.com/cssref/…
甚至空白：w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space

标签： jquery css resize

【解决方案1】：

您将需要一些 JavaScript 来解决这个问题。这是我的示例标记

<div style="width: 400px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit</span>
</div>

我给跨度指定了显示值inline-block，这样我就可以测量它的宽度了。

然后下面的基于 jquery 的脚本将使它缩小，直到它有点太小了。

$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));

    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.width() >= 400);
});

查看 JSFiddle 进行演示：http://jsfiddle.net/gEjTz/

【讨论】：