我有一个页面,该页面应该显示图像的缩略图,并在下方显示其文件名。这是我目前正在使用的:
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;
}
这很好用,除了长文件名会扩展它们的父容器,弄乱页面布局。我希望较短的文件名像现在这样保持居中,但要剪掉太长的文件名,这样它们就不会比容器中的图像宽。图像宽度未知。我有什么想法可以让这项工作成功吗?
最佳答案
这是工作 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;
}
关于html - 将元素裁剪到其他元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11503253/