html - 将元素裁剪到其他元素的宽度

Question

我有一个页面，该页面应该显示图像的缩略图，并在下方显示其文件名。这是我目前正在使用的:

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;
}

这很好用，除了长文件名会扩展它们的父容器，弄乱页面布局。我希望较短的文件名像现在这样保持居中，但要剪掉太长的文件名，这样它们就不会比容器中的图像宽。图像宽度未知。我有什么想法可以让这项工作成功吗？

Answer 1

这是工作 fiddle :http://jsfiddle.net/adrz3/1/

CSS:

.thumbContainer{
    display: inline-block;
    margin-right: 8px;
    background:#333;
    max-width:154px;
    text-decoration:none;
}
.thumbnail{
    display:block;
    border: 2px solid black;
    max-height: 150px;

}
.description{
    height: 18px;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    display: block;
    color: #fff;
    padding:5px 0;
}