Wrap div width to contents but also wrap contents at a certain point

Maybe this is asking to have my cake and eat it to, but I think I am close to a solution and just need a little help. I have done quite a bit of googling but have not been able to find exactly what I am looking for.

I am creating a clickable icon to activate some javascript on the page. There can be multiple icons and the text on the icon is provided by the user. I am wrapping the icons to 55px which will make the text properly go on to a new line, but if there is a single word that extends beyond 55px it will break out of the containing div.

I have a mockup of the relevant code

HTML:

<div class="outer">
    <div class="inner">
         <a>
             <img src="chronometer.png" height=32px width=32px />
             <div class="text">Superawesomethingymabob</div>
         </a>
    </div>
</div>

CSS:

div.outer {
     border: 1px solid blue;
     background-color: cyan;
     float:left;
     text-align: center;
}
div.inner {
     border: 1px solid red;
     width:55px;
}
div.text {
     background-co开发者_如何学JAVAlor:yellow;
     width:auto;
}
a {
     display:inline-block;
}

So basically what I'm doing is I have an inner div with a fixed width so text will wrap. The outer div is floated left so it will shrink-wrap to it's contents. The problem is that the outer div will shrink-wrap to the inner div's width, not the width of the text that breaks out of the inner div.

Any help or suggestions would be appreciated and rewarded with 500 internets. I am flexible on the markup or CSS, I just want something that is cross browser compatible.

Thanks in advance.

Try using word-wrap: break-word

What Eric suggested "break-word" is good but its not cross browser compatible.

Statistically most of the used words are less that 14 characters. So usually what I do to keep the design good even if the browser does not comply with the "break-word" property is to select a font-size that will show 14 characters in the available space. and use the property "overflow: hidden" to hide extra characters in words longer than 14 characters.

Another way which is not recommended and not clean is to create a function in JS to render the words by adding a space in words longer than 14 characters.

I could not find a css solution to my problem so here is my javascript solution:

/**
 * Adjust the widths of each icon div to be as wide as the longest unbroken word
 */
function adjustIconWidths() {
   $("div.icon").each(function(){

    var width = $(this).width();
    var starting = width;
    $("span",this).each(function(){
        var tmp = $(this).width();
        if(tmp > width){
           width = tmp;
        }
    })
    if(width != starting){
        $(this).width(width);
    }

  });
}