文字大小自适应 div

将文字放到一个容器中，从最小的值开始逐一尝试增加字号是否超出容器宽度。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<!– 默认使用webkit内核 –>
<meta name=“renderer” content=“webkit”>
<meta name=“viewport”
content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>
<!– 网站tab小图标 –>
<script src=“http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js”></script>
<style type=“text/css”>
body {
font-size: 12px;
}
.box {
width: 400px;
height: 100px;
line-height: 100px;
border: solid 1px #888;
padding: 10px;
margin-bottom: 10px;
}
.box span {
white-space: nowrap;
}
</style>
</head>
<body>
<div id=“b-1” class=“box”>
<span id=“s-1”>中华人民共和国</span>
</div>
<div id=“b-2” class=“box”>
<span id=“s-2”>中华人民共和国中华人民共和国</span>
</div>
<div id=“b-3” class=“box”>
<span id=“s-3”>中华人民共和国中华人民共和国中华人民共和国</span>
</div>
<script type=“text/javascript”>
function size(dom, max) {
for (var i = 12; i < max; i++) {
if (dom.width() > max) {
dom.css(‘font-size’, (i – 2) + ‘px’);
break;
} else {
dom.css(‘font-size’, i + ‘px’);
}
}
}
function init() {
size($(‘#s-1’), $(‘#b-1’).width());
size($(‘#s-2’), $(‘#b-2’).width());
size($(‘#s-3’), $(‘#b-3’).width());
}
var w = 300;
setInterval(function () {
if (w > 600) {
w = 300;
}
w += 50;
$(‘.box’).width(w);
init();
}, 500)
</script>
</body>
</html>