How does one adjust the width of an element to only be as wide as its content, including when a line of text wraps due to a fixed outer wrapper width.
Notice in this FIDDLE that the yellow background on each div is snug to its text content, except the one whose text wraps, in which case, the width of that div extends to the width of the outer wrapper.
What's the solution?
<div class="wrapper">
<div class="text">apple</div>
<div class="text">banana peels shouldn't be green</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
</div>