Javascript 将最宽的文本行调整为div，并更改第二行以匹配比率

我的想法是让一个div展示两个文本行根据文本长度和字体大小相互比较的外观

问题是，我想在一个固定宽度的div中展示这一点

因此，最宽的文本行（不一定是字体最大的行，也不一定是字符最多的行）应该调整大小，使其始终位于div的边缘-在一行上

同时，不太宽的文本行的字体大小也应该调整，以保持两行之间的比例

我刚刚编写了以下代码：

剧本

HTML

下面是代码+概念图场景的示例图像：

恐怕我只能靠自己了。 显然还有很长的路要走

我更希望文本输入只镜像一次，但我认为这样就不可能找到最宽的行。 我不知道如何得到我所谓的最大字体大小

---

这里有一个jQuery解决方案，可以满足您的需要。使用em单位作为字体大小使它简单得多。右边缘的贴合度并不是100%完美，但经过一些调整后可能会变得更好。一些css技巧应该会有所帮助

概念将文本放置在屏幕外的范围内，获取该范围的宽度并和容器的宽度进行比较。这允许进行简单的em计算

代码非常简单，因此不需要太多解释

---

演示：

不知道您对jQuery插件是否满意，但如果满意，这可能是一个不错的选择：

它的使用非常简单，以下是项目页面的演示表单：

将您的html更改为：

<div class="Mainbox" style="width:400px;border:1px solid black">
    <div id="boxPreviewOne">This is line one</div>
    <div id="boxPreviewTwo">This is line two</div>
</div>

下面是代码的一个实例：

---

我很抱歉用jquery标记这个问题，因为我没有足够的技能来实际实现您的答案

---

我在这里找到了解决方案的一部分：

这应该或多或少满足您的要求：

$(".linecontainer").each(function() {
    var maxWidth = $(this).width();
    var largestWidth = 0;
    var largestSpan;
    $(this).find("span")
        .each(function() {
            $(this).data("originalSize", parseInt($(this).css("font-size")));
            if ($(this).width() > largestWidth)
            {
                largestWidth = $(this).width();
                largestSpan = $(this);
            }
        });
    var largestSizeFound = false;
    var largestSize = 0;
    var sizeRatio;
    while (largestSizeFound == false && largestSize < 1000)
    {
        largestSize++;
        largestSpan.css("font-size", largestSize + "px");
        if (largestSpan.width() > largestSpan.parents(".linecontainer").width())
        {
            largestSize--;
            largestSizeFound = true;
            sizeRatio = largestSize / largestSpan.data("originalSize");
        }
    }
    $(this).find("span")
        .each(function() {
            $(this).css("font-size", parseInt(sizeRatio * $(this).data("originalSize")) + "px")
        })
});​

---

谢谢你的回答，查理，看起来很聪明。然而，我的jquery知识非常有限，因此我正在努力研究如何将其适应我自己的场景。有两行，其中只有最宽的一行（取决于文本和字体大小）适合div。

<div class="Mainbox" style="width:400px;border:1px solid black">
    <div id="boxPreviewOne">This is line one</div>
    <div id="boxPreviewTwo">This is line two</div>
</div>

$('.Mainbox').bigtext();​

$(".linecontainer").each(function() {
    var maxWidth = $(this).width();
    var largestWidth = 0;
    var largestSpan;
    $(this).find("span")
        .each(function() {
            $(this).data("originalSize", parseInt($(this).css("font-size")));
            if ($(this).width() > largestWidth)
            {
                largestWidth = $(this).width();
                largestSpan = $(this);
            }
        });
    var largestSizeFound = false;
    var largestSize = 0;
    var sizeRatio;
    while (largestSizeFound == false && largestSize < 1000)
    {
        largestSize++;
        largestSpan.css("font-size", largestSize + "px");
        if (largestSpan.width() > largestSpan.parents(".linecontainer").width())
        {
            largestSize--;
            largestSizeFound = true;
            sizeRatio = largestSize / largestSpan.data("originalSize");
        }
    }
    $(this).find("span")
        .each(function() {
            $(this).css("font-size", parseInt(sizeRatio * $(this).data("originalSize")) + "px")
        })
});​

<div class="linecontainer">
    <div><span class="lineone">this is the first line of text</span></div>
    <div><span class="linetwo">another line of text</span></div>
</div>

.linecontainer { width:250px; overflow:hidden; }
.linecontainer span { white-space:nowrap;  }
.lineone { font-size:20px; }
.linetwo { font-size:10px; }​