&

【HTML】DIV中文字字體大小自適應寬度調整

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2023年8月25日 0:11 本文熱度 695

項目中用到，故做了下整理

字體大小自適應寬度功能核心邏輯

通過文字面積與div面積進行比較，從而對字體大小進行自適應處理

如果小于14px，使用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>

該文章在 2023/8/25 0:11:37 編輯過

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。