文字大小自動調整div寬度

Question

我爲一個問題而奮鬥。我有一個具有特定寬度和高度的div（227px x 27px）。在這個div裏面是First and Last name，作爲一個變量。有時候這個名字很小，所以div中有足夠的空間，但是有時名字很長，我需要調整文本的大小以適應div。我想也有最大的字體大小定義

我的HTML代碼如下所示：

<div class="Basic-Text-Frame _idGenPageitem-6" id="fitin"> 
    <p class="Basic-Paragraph ParaOverride-1"> 
    <span class="CharOverride-2" ><?php echo $userdata->display_name;?></span> 
    </p> 
</div> 

CSS：

div.Basic-Text-Frame { 
border-style:solid; 
} 
p.Basic-Paragraph { 
    color:#000000; 
    font-family:"Minion Pro", serif; 
    font-size:12px; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    line-height:1.2; 
    margin-bottom:0; 
    margin-left:0; 
    margin-right:0; 
    margin-top:0; 
    orphans:1; 
    page-break-after:auto; 
    page-break-before:auto; 
    text-align:left; 
    text-decoration:none; 
    text-indent:0; 
    text-transform:none; 
    widows:1; 
} 
div._idGenPageitem-6 { 
    height:27px; 
    left:0px; 
    overflow:hidden; 
    position:absolute; 
    top:0px; 
    width:227px; 
    z-index:0; 
} 
p.ParaOverride-1 { 
    text-align:center; 
} 
span.CharOverride-2 { 
    color:#5b9b98; 
    font-family:Garamond, serif; 
    font-size:x-large; 
    font-style:normal; 
    font-variant:small-caps; 
    font-weight:normal; 
    text-transform:none; 
    max-height: 29px; 
} 

編輯：我曾嘗試resize font-size according to div size和this suggested answer和flowType plugin和FitText plugin之前和我coudnt做到這一點，這就是爲什麼我提出了這個問題。

我的問題是，較大的文本只是在新的一行，並沒有相應地適合這個div盒。如此長的文本結果不在格子裏，也看不到。當我把跨度高度「絕對」值，它總是更改爲「自動」

這裏是我的

如何解決這個問題，工作問題了嗎？

Answer 1

在頁面加載中運行此功能以根據需要調整文本大小。在css中重要的是white-space: nowrap，它停止將文本包裝到第二行。
不要忘記給測試跨度「d」設置與真實文本相同的字體系列，樣式和重量。

function fittext() 
 
{ 
 
    var maxW = 227, maxH = 27, maxSize = 20; 
 
    var c = document.getElementsByClassName("fitin"); 
 
    var d = document.createElement("span"); 
 
    d.style.fontSize = maxSize + "px"; 
 

 
    for (var i = 0; i < c.length; i++) 
 
    { 
 
     d.innerHTML = c[i].innerHTML; 
 
     document.body.appendChild(d); 
 
     var w = d.offsetWidth; 
 
     var h = d.offsetHeight; 
 
     document.body.removeChild(d); 
 
     var x = w > maxW ? maxW/w : 1; 
 
     var y = h > maxH ? maxH/h : 1; 
 
     var r = Math.min(x, y) * maxSize; 
 
     c[i].style.fontSize = r + "px"; 
 
    } 
 
} 
 

 
fittext();

DIV 
 
{ 
 
    width: 227px; 
 
    height: 27px; 
 
    overflow: hidden; 
 
    margin-bottom: 9px; 
 
    background-color: silver; 
 
} 
 

 
P 
 
{ 
 
    margin: 0px; 
 
    color: black; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
}

<DIV> 
 
    <P> 
 
     <SPAN CLASS="fitin">Short Guy</SPAN> 
 
    </P> 
 
</DIV> 
 
<DIV> 
 
    <P> 
 
     <SPAN CLASS="fitin">Just A Random Regular Person</SPAN> 
 
    </P> 
 
</DIV> 
 
<DIV> 
 
    <P> 
 
     <SPAN CLASS="fitin">A Really Very Extraordinarily Long And Tall Woman</SPAN> 
 
    </P> 
 
</DIV>