How to adjust word-wrapped text's width when it exceed containers max-width ? (HTML)

How to adjust word-wrapped text's width when it exceed containers
max-width ? (HTML)

Im trying to put some text info on thumbnails, the info box is floating to
the left and should not exceed max-width:85%; (of the thumbnail).
Thumbnail area is marked light gray in the picture, text info area is
yellow.
When the text exceed the with, text holding element ocupies full 85% and
word wraps to next line. My problem is that there are extra white spaces
on the first line, which I would like gone.
In my project yellow area holds Thumbnail title, even though there are few
words in it, sometimes it just leaves big gaps on the first line which
look bad.
Is there any way to fix this or am I asking for too much ?
jsFiddle demo

HTML
<div id="main">
<div id="text">
<h3>Some text and line breaking words. Some text and line breaking words.
Soaaaaame text and line breaking words.<h3>
</div>
CSS
#main {
width:100%;
background-color:#ccc;
}
#text {
display:inline-block;
max-width:85%;
background-color:yellow;
}