How do you fit multiple lines of text to the width of a div?

Question

I want to make each span in my parent div text size automagically so it fills the parent div's width.

<div class="box">
  <span class="fit">what</span>
  <span class="fit">an</span>
  <span class="fit">idea!</span>
</div>

.box{
  width: 50%;
  background: beige;
  text-align: center;
}
.fit{
  display: block;
}

The resulting text on each line would have a unique font-size because each has a different line length.

I absolutely expect it to require javascript. Just haven't found the right solution. — mike, Jun 20 '15 at 21:30
yes. that's the goal. it's a popular effect in posters and graphics. — mike, Jun 20 '15 at 21:50

score 0 · Answer 1 · answered Jun 21 '15 at 01:55

This will get you closer... not sure what to do about line height though...

var orig = $('.box').css('width');
$('.fit').each(function () {
    $(this).css('font-size', '1em');
    var size = $(this).css('font-size');
    var cur = parseFloat(size.substring(0, size.length - 3));
    var prev;
    while (parseInt($('.box').css('width')) > parseInt($(this).css('width'))) {
        prev = cur;
        cur += 1;
        $(this).css('font-size', "" + cur + "em");
    }
    $(this).css('font-size', "" + prev + "em");
});

.box {
    width: 50%;
    background: beige;
    text-align: center;
}
.fit {
    display: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="fit">what</div>
  <div class="fit">an</div>
  <span class="fit">idea!</span>
</div>

How do you fit multiple lines of text to the width of a div?

1 Answers1