字体大小自动适应DIV

<!DOCTYPE html>
<html>
   <head>
       <title>phone 设计</title>
       <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   </head>
   <body>
<div style=" width:900px; height:500px; overflow:hidden; font-size:12px;" id="str">文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小</div>
</body>
</html>
   <script language="javascript">

   window.onload = function(){
           var str=document.getElementById("str");
   var fontw=12; //初始的字体大小
   var fonth=fontw+2;//初始字体高度
   var width=str.offsetWidth;//DIV的宽度
   var height=str.offsetHeight;//div的高度
   var lenstr=str.innerHTML.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));
   str.style.fontSize=rfont+"px";
   //}
   }
</script>

来源：CSDN

作者：浅陌游离

链接：https://blog.csdn.net/xiaocie3456/article/details/26095985

标签

var

div

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!