字體大小取決於div的寬度和高度

Question

請考慮以下標記和樣式：

<div>
    Some text Some text Some text 
</div>

div{
    width: 100px;
}

如何使div的text-content具有字體大小的屬性值，以使div的text-content完全位於一行上，所以有最大的font-size值？ jsFiddle

Answer 1

改為這樣做：

div{
    min-width: 200px;
}

通過設置最小寬度，可以確保div永遠不會變得足夠小以至於無法將文本折疊成多行。

演示： http ： //jsfiddle.net/96daR/4/

Answer 2

給div輸入一個ID，說出id="myDiv"

使用其中之一獲取身高

javascript：

var myDiv = document.getElementById("myDiv");
h=myDiv.clientHeight;
h=myDiv.scrollHeight;
h=myDiv.offsetHeight;

或在jQuery中：

h=$("#myDiv").height();
h=$("#myDiv").innerHeight();
h=$("#myDiv").outerHeight();

接下來使用以下命令設置字體大小：

document.getElementById("myDiv").style.font-size=h+"px";

Answer 3

嘗試這個：

HTML：

<div id="container">
    <span id="text_container">whatever text you want</span>
</div>

CSS：

#container {
    background:cyan;
    width:200px;
}
#text_container {
    white-space:nowrap;
}

JS：

var container = $("#container"),
text_container = $("#text_container"),
start_size = 100,
container_width = container.width();

text_container.css('font-size', start_size + 'px');


while (text_container.width() > container_width) {
    text_container.css('font-size', start_size--+'px');
}

演示