<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  var default_font_size = 12;
  var container_width = $('#words').width();

  $('#words span').each(function(){
    var span_width = $(this).width();
    var new_font_size = (container_width / span_width) * default_font_size;
    $(this).css({"font-size" : new_font_size, "line-height" : new_font_size/1.2 + "px"});
  });

});
</script>

<style>
#words
{
  width: 250px;
  font-size: 12px;
}
#words > span
{
  display: inline-block;
}
</style>

<div id="words">
  <span>CSS</span>
  <span>Text</span>
  <span>Resize</span>
  <span>Using</span>
  <span>JavaScript</span>
  <span>AND</span>
  <span>jQuery</span>
</div>
Published in: JavaScript
Download

Related snippets