字体大小自动适应DIV

最新推荐文章于 2024-02-01 13:45:13 发布

浅陌游离

最新推荐文章于 2024-02-01 13:45:13 发布

阅读量1.2w

点赞数 1

分类专栏：学习笔记

学习笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

浅陌游离

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
字体大小自动适应DIV

phone 设计文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小 window.onload = function(){
复制链接

扫一扫