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

给.thumbContainer一个等于缩略图图像宽度的宽度。

还要给.thumbContainer text-align：center

Answer 2

尝试将此设置为您的描述类..

position: relative;

并将“overflow：hidden或auto”设置为你的thumbContainer类！

如果这不起作用....你可以尝试给出最小宽度或边距：0自动;到你的一个班级..保持开始！

Answer 3

这是工作小提琴：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;
}

希望这会对你有所帮助。

剪切元素到其他元素的宽度

3 个答案: