[英]Font-size depends on div width and height
请考虑以下标记和样式:
<div>
Some text Some text Some text
</div>
div{
width: 100px;
}
如何使div的text-content具有字体大小的属性值,以使div的text-content完全位于一行上,所以有最大的font-size值? jsFiddle
改为这样做:
div{
min-width: 200px;
}
通过设置最小宽度,可以确保div永远不会变得足够小以至于无法将文本折叠成多行。
演示: http : //jsfiddle.net/96daR/4/
给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";
尝试这个:
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.