你如何適應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

這將讓你更接近...不知道做一下行高度，雖然什麼...

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>