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.

enter image description here

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?

your updated fiddle

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


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -