文字大小自适应 div


 

思路:

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

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  6.     <!– 默认使用webkit内核 –>
  7.     <meta name=“renderer” content=“webkit”>
  8.     <meta name=“viewport”
  9.         content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>
  10.     <!– 网站tab小图标 –>
  11.     <script src=“http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js”></script>
  12.     <style type=“text/css”>
  13.         body {
  14.             font-size: 12px;
  15.         }
  16.         .box {
  17.             width: 400px;
  18.             height: 100px;
  19.             line-height: 100px;
  20.             border: solid 1px #888;
  21.             padding: 10px;
  22.             margin-bottom: 10px;
  23.         }
  24.         .box span {
  25.             white-space: nowrap;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div id=“b-1” class=“box”>
  31.         <span id=“s-1”>中华人民共和国</span>
  32.     </div>
  33.     <div id=“b-2” class=“box”>
  34.         <span id=“s-2”>中华人民共和国中华人民共和国</span>
  35.     </div>
  36.     <div id=“b-3” class=“box”>
  37.         <span id=“s-3”>中华人民共和国中华人民共和国中华人民共和国</span>
  38.     </div>
  39.     <script type=“text/javascript”>
  40.         function size(dom, max) {
  41.             for (var i = 12; i < max; i++) {
  42.                 if (dom.width() > max) {
  43.                     dom.css(‘font-size’, (i – 2) + ‘px’);
  44.                     break;
  45.                 } else {
  46.                     dom.css(‘font-size’, i + ‘px’);
  47.                 }
  48.             }
  49.         }
  50.         function init() {
  51.             size($(‘#s-1’), $(‘#b-1’).width());
  52.             size($(‘#s-2’), $(‘#b-2’).width());
  53.             size($(‘#s-3’), $(‘#b-3’).width());
  54.         }
  55.         var w = 300;
  56.         setInterval(function () {
  57.             if (w > 600) {
  58.                 w = 300;
  59.             }
  60.             w += 50;
  61.             $(‘.box’).width(w);
  62.             init();
  63.         }, 500)
  64.     </script>
  65. </body>
  66. </html>

本文链接地址: 文字大小自适应 div

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注