適合最寬的文本行到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/

Answer 2

這裏是一個jQuery的解決方案，你想要做什麼。使用em單位字體大小使它更簡單。飛度在右邊並不是100％完美，但有些調整可以做得更好。一些CSS技巧應該幫助

概念將文本放置在屏幕外跨度，獲取該跨度的寬度並與容器的寬度進行比較。這允許簡單的em計算。

代碼很簡單，因此應該不需要太多的解釋

演示：http://jsfiddle.net/KxjHC/2/

Answer 3

不知道你滿意一個jQuery插件，但即便如此，這可能是一個不錯的選擇：

http://www.zachleat.com/web/bigtext-makes-text-big/

它的使用方法非常簡單，這裏有一個演示組成項目頁面：http://jsfiddle.net/zachleat/WzN6d/

改變你的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> 

然後應用：

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

這裏是爲您的代碼一個活生生的例子： http://jsfiddle.net/TqK4M/1/

Answer 4

我與jQuery的標籤爲此道歉，因爲我沒有足夠的技巧來真正實現你的答案。

我在這裏找到我的解決方案的一部分：Auto-size dynamic text to fill fixed size container