Font-size depends on div width and height - html

Question

Consider the following markup and styles:
<div>
Some text Some text Some text
</div>
div{
width: 100px;
}
How can I do that the text-content of div have a font-size's property value such that there is maximum font-size value in which text-content of div lie on one line entirely? jsFiddle

Answer 1

Try this:
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');
}
DEMO

Answer 2

Do this instead:
div{
min-width: 200px;
}
By setting a minimum width you ensure that the div never gets small enough to collapse the text to multiple lines.
Demo: http://jsfiddle.net/96daR/4/

Answer 3

Give a id to the div, say id="myDiv"
Get height using one of this
javascript:
var myDiv = document.getElementById("myDiv");
h=myDiv.clientHeight;
h=myDiv.scrollHeight;
h=myDiv.offsetHeight;
or in jquery:
h=$("#myDiv").height();
h=$("#myDiv").innerHeight();
h=$("#myDiv").outerHeight();
Next set the font-size using this:
document.getElementById("myDiv").style.font-size=h+"px";