En este jsFiddle tengo dos span s que deberían caber en un div. El primero encaja, pero el segundo no. Lo que necesito es ajustar mediante programación el tamaño de la fuente para que se ajuste al div. Necesito hacerlo con CSS o con Javascript. es posible?

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>


    
0
ps0604 29 oct. 2017 a las 19:05

3 respuestas

La mejor respuesta

Así es como lo haría con una función recursiva. No estoy seguro de que sea la respuesta óptima, pero hace el trabajo.

// 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>
1
3Dos 29 oct. 2017 a las 16:19

Es feo y lo siento. Pero esta puede ser una solución para usted (usando jQuery para simplificar)

$('.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');
  }
})
div.div1 {
  height:120px;
  width:120px;
  background-color:orange;
}
    
span.span1 {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold; 
}
<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>
0
Arthur 29 oct. 2017 a las 16:21

También hay algunos complementos de jQuery, si no quieres codificarte:

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

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

https://github.com/zachleat/BigText

Tal vez eche un vistazo al código de jquery.fittext.min.js, parece bastante simple:

(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);

Aquí un ejemplo con 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>
0
Daniel Sixl 29 oct. 2017 a las 16:50