字体大小取决于div的宽度和高度

时间:2014-02-12 03:47:57

标签: html css

考虑以下标记和样式:

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

div{
    width: 100px;
}

我怎么能这样做div的文本内容有一个font-size的属性值,这样有一个最大的font-size值,div的text-content完全位于一行? jsFiddle

3 个答案:

答案 0 :(得分:0)

请改为:

div{
    min-width: 200px;
}

通过设置最小宽度,您可以确保div永远不会小到足以将文本折叠为多行。

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

答案 1 :(得分:0)

给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();

接下来使用以下方法设置font-size:

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

答案 2 :(得分:0)

试试这个:

<强> 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