我做了一些带有图片的缩略图.我正在使用bootstrap.
在每张图片下面我想要一个标题.
问题是当标题太大时,它会突破到第二行,使缩略图变得杂乱无章.
我想知道是否有办法做以下规则......
如果标题大于图片的宽度,则显示"...",当您将鼠标悬停在图片上方时,显示任何标题.
<div class="col-xs-4">
<div class="thumbnail">
<img style="width: 150px; height: 150px" src="@Html.DisplayFor(modelItem => item.IMAGE)" alt="imagem" class="img-responsive">
<p>@Html.DisplayFor(modelItem => item.TITLE)</p>
</div>
</div>编辑
解:
使用:
p.classname{
white-space:pre;
overflow:hidden;
text-overflow: ellipsis;
width: 200px;
}
p.classname:hover{
text-overflow: inherit;
overflow: visible;
}