Clipping element to width of other element
===

I've got a page that's supposed to display thumbnails of images with their file names underneath. Here's what I'm using at the moment:

**HTML**:

    <a href="#" class="thumbContainer">
    	<img class="thumbnail" src="preview4.jpg">
    	<br>
    	<span class="description">preview4.jpg</span>
    </a>

**CSS**:

    .description{
    	width: 100%;
    	height: 18px;
    	font-size: 16px;
    	text-align: center;
    	white-space: nowrap;
    	overflow: hidden;
    	display: inline-block;
    	color: black;
    }.thumbnail{
    	display: inline-block;
    	border: 2px solid black;
    	max-height: 150px;
    }.thumbContainer{
    	display: inline-block;
    	margin-right: 8px;
    }

This works well enough, except that long file names expand their parent container, messing up the page layout. I'd like the shorter file names to remain centered the way they are now, but have names that are too long be clipped so they are no wider than the image in their container. The image width is unknown. Any ideas how I could make this work?