字體大小等於當前容器的高度

如果我有一個x高的div，我怎樣才能使文本內部的最大可以假設它只能佔用一行。字體大小等於當前容器的高度

雖然我希望能有一個CSS的答案，任何的jQuery/JavaScript的答案是剛剛接受了，因爲我需要這個工作，無論哪種方式:)

2011-09-27 FreeSnow

我不認爲你可以輕鬆做到這一點。爲了實現你所需要的，你必須把文本顯示出來，並用客戶端使用的特定字體來測量它的寬度。然後繼續減小字體大小，直到寬度符合容器寬度 - 這將確保您輸出一行。最後，您需要找到找到的尺寸或容器高度中的較小者 - 這是您的字體大小。由於您不能控制字體（由於客戶端上的字體替換），因此您無法在CSS中實現此功能。它可能在JavaScript中，但我不確定。 –

基於阿萊克斯G公司的評論，this example展示瞭如何將逐步增加字體大小，你會達到你的最大至：

HTML

<div> 
    <span>This is some text</span> 
</div>

CSS

div { 
    width: 300px; 
} 

span { 
    display: inline-block; 
}

jQuery的

var $span = $('span'); 
var $div = $('div'); 

while($span.width() < $div.width()){ 
    $span.css({fontSize: "+=1"}); 
} 
$span.css({fontSize: "-=1"});

如果你想作爲字號變更後，你可以隱藏字符，直到while循環完成，以消除任何口吃。

來源

2011-09-27 14:35:39 Pat

設置字體大小及行高到容器的同一高度：

div { 
    height:50px; 
    font-size:50px; 
    line-height:50px; 
    border:1px solid red; 
}

演示：http://jsfiddle.net/AlienWebguy/V7f4w/

來源

2011-09-27 14:25:04 AlienWebguy

沒有辦法，我知道這樣做與純CSS，這將是跨瀏覽器compatibile。使用JavaScript和/或jQuery來做到這一點。我會寫出來的jQuery的，因爲它更容易一點：

$("mydiv").css("font-size", $("mydiv").css("height"));

來源

2011-09-27 14:25:15 Primus202

字體大小等於當前容器的高度

回答

相關問題