html - Auto resizing div with max width -
i'm trying create div text resizes width depending on how text in div, has maximum width, splitting text multiple lines if exceeds max-width. text resize 1 line of text , split when there's much, when there's more 1 line large space appears inside div between right edge of text , border.
html:
<div class="balloon"> sample text. second sentence. </div>
css:
.balloon { background: #fff; border: solid 2px; display: inline-block; max-width: 225px; }
here's demo demonstrate mean: http://jsfiddle.net/oft3n5wg/
any ideas how fix this?
this because first word on 2nd line large fit in space have highlighted in red. replace word "second" "seco" , you'll see fits
you can add text-align: center
space doesn't bad if want, or letter-spacing: 1px
there's more space between letters , fill white spaces bit more