javascript - 使最宽的文本行适合 div 并更改第二行以匹配比率

Question

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

问题是，我想在固定宽度的 div 中展示它。

因此最宽的文本行(不一定是字体最大的那一行，也不一定是字符最多的那一行)应该调整大小以始终到达 div 的边缘 - 在一行上。

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

我刚刚写了这段代码:

脚本

<script>
 function typeFunction() {
document.getElementById('boxOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxTwo').innerHTML = document.getElementById("lineTwo").value;

document.getElementById('boxPreviewOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxPreviewTwo').innerHTML = document.getElementById("lineTwo").value;

checkWidth();
}

function fontSize(fontsize,target) {
target.style.fontSize = fontsize;
checkWidth();
} 

function checkWidth() {
ratio = document.getElementById("sizeOne").value.replace(/\D/g, '')/document.getElementById("sizeTwo").value.replace(/\D/g, '');

widthOne = document.getElementById("boxOne").offsetWidth;
widthTwo = document.getElementById("boxTwo").offsetWidth;

if (widthOne >= widthTwo) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE/ratio";
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE*ratio";
}
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE*ratio";
} else {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE/ratio";
}
}
}
</script>

HTML

Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>


Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>

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

恐怕我一个人能做到的就这么多了。
显然，还有很长的路要走。

1. 我宁愿只对文本输入进行一次镜像，但我认为这样就不可能找到最宽的行。
2. 我不知道如何获得我所谓的“MAX_FONT_SIZE”

Answer 1

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

$(".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")
        })
});​

HTML

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

CSS

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

http://jsfiddle.net/SZG7E/