项目中用到，故做了下整理
字体大小自适应宽度功能核心逻辑
通过文字面积与div面积进行比较，从而对字体大小进行自适应处理
如果小于12px，使用css缩放(transform:scale)
效果如图：
<!DOCTYPE html>
<html>
<head>
<title>字体大小自适应</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
.div{
width:150px;
height:22px;
line-height:22px;
display:block;
font-size:20px;
overflow:hidden;
}
.div span{
display:inline-block;
width:350px;
height:22px;
transform-origin: 0 0;
line-height:22px;
vertical-align:middle;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div style="font-style:italic;color:gray">字体大小自适应div宽度演示</div>
<div class='div' span style="font-weight:bold;height:30px;line-height:30px;">亲爱的旅人</span></div>
<div class='div'></div>
<div class='div'>就此告别吧</div>
<div class='div'>水上的列车就快到站</div>
<div class='div'>开往未来的路上</div>
<div class='div'>没有人会再回返</div>
<div class='div'>说声再见吧</div>
<div class='div'>就算留恋也不要回头看</div>
<div class='div'>在那大海的彼端</div>
<div class='div'>一定有空濛的彼岸</div>
<div class='div'>做最温柔的梦</div>
<div class='div'>盛满世间行色匆匆</div>
<div class='div'>在渺茫的时空</div>
<div class='div'>在千百万人之中 听一听心声</div>
<div class='div'>一路不断失去 一生将不断见证</div>
<div class='div'>看过再多风景眼眸如初清澄</div>
<div class='div'>爱依旧让你动容</div>
<div class='div'>亲爱的旅人</div>
<div class='div'>没有一条路无风无浪</div>
<div class='div'>会有孤独 会有悲伤</div>
<div class='div'>也会有无尽的希望</div>
<div class='div'>亲爱的旅人</div>
<div class='div'>这一程会短暂却又漫长</div>
<div class='div'>而一切终将 汇聚成最充盈的景象</div>
</body>
<script language="javascript">
$(function(){
$(".div").each(function(){
var str=$(this);
var fontw=20; //初始的字体大小
var fonth=fontw+2;//初始字体高度
var width=str.width();//DIV的宽度
var height=str.height();//div的高度
var lenstr=str[0].innerText.length;//DIV里文字长度
fonts=fontw*fonth*lenstr;//字体面积
divs=width*height;//DIV面积
if(fonts>divs){
var rfont;//重设字体大小为rfont
//rfont=Math.round((Math.sqrt(4*lenstr*divs-4*lenstr*lenstr)-2*lenstr)/(2*lenstr));
rfont=divs/lenstr/fonth;
if(rfont>=12){
str.css("font-size",rfont+"px");
}
else {
str.html("<span>"+str.html()+"</span>");
str.find("span").css("transform","scale("+divs/fonts+")");
}
}
});
});
</script>
</html>