如何将多行文本放入div的宽度？

Question

http://codepen.io/anon/pen/oXGMQZ

我希望自动生成父div文本大小的每个范围，以便填充父div的宽度。

<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;
}

每行的结果文本将具有唯一的字体大小，因为每个行具有不同的行长度。

Answer 1

这会让你更接近......不知道如何处理行高......

＆＃13;

＆＃13;

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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;