Question

In this jsFiddle我有两个span s应该适合div。第一个适合，但第二个不适合。我需要的是以编程方式调整字体的大小以适应div。我需要使用CSS或Javascript来完成它。这可能吗？

HTML

div.div1 {
  height:120px;
  width:120px;
  background-color:orange;
}
    
span.span1 {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold; 
}

<div class="div1">
  <span class="span1">1234</span>
</div>
<br/>
<div class="div1">
  <span class="span1">12345</span>
</div>

Answer 1

以下是我使用递归函数的方法。不确定这是最佳答案，但它确实有效。

// This is a recursive function stopping when the inner span gets small enough
function checkOverflow (container) {
  const child = container.children[0]

  if (child.offsetWidth > container.offsetWidth) {
    // Does only work with px size, for other units, you'll have to modify this
    child.style.fontSize = parseInt(window.getComputedStyle(child).fontSize) - 1 + 'px'
    checkOverflow(container)
  }
}

const containers = document.querySelectorAll('.div1')

containers.forEach(checkOverflow)

div.div1 {
  height:120px;
  width:120px;
  background-color:orange;
}

span.span1 {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold; 
}

<div class="div1">
   <span class="span1">1234</span>
</div>
<br/>
<div class="div1">
   <span class="span1">12345</span>
</div>

Answer 2

它太丑了，我很抱歉。但这可以为您提供解决方案（简单地使用jQuery）

＆＃13;

$('.div1').each(function() {
  let $child = $('.span1', $(this));
  let current = 3;
  $child.css('font-size', current + 'em');
  
  while ($child.width() >=  $(this).width()) {
    current -= 0.1;
    $child.css('font-size', current + 'em');
  }
})

＆＃13;

div.div1 {
  height:120px;
  width:120px;
  background-color:orange;
}
    
span.span1 {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <span class="span1">1234</span>
</div>
<br/>
<div class="div1">
  <span class="span1">12345</span>
</div>

＆＃13;

Answer 3

如果您不想自己编码，还有一些jQuery插件：

https://github.com/davatron5000/FitText.js

https://github.com/freqDec/slabText/

https://github.com/zachleat/BigText

也许看一下jquery.fittext.min.js的代码，看起来很简单：

(function(a){a.fn.fitText=function(d,b){var e=d||1,c=a.extend({minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY},b);return this.each(function(){var f=a(this);var g=function(){f.css("font-size",Math.max(Math.min(f.width()/(e*10),parseFloat(c.maxFontSize)),parseFloat(c.minFontSize)))};g();a(window).on("resize.fittext orientationchange.fittext",g)})}})(jQuery);

这是BigText的一个例子：

.div1 {
  height:120px;
  width:120px;
  background-color:orange;
   text-align: center;
}

.span1 {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>

<div class="div1">
   <span class="span1">1234</span>
</div>
<br/>
<div class="div1"><span id="adapt" class="span1">12345678</span></div>

<script>
  $("#adapt").fitText(1, { minFontSize: '8px', maxFontSize: '256px' });
</script>

自动调整跨度的字体以适合div

3 个答案: