Question

我用一些图片制作了缩略图。我正在使用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;
}

Answer 1

简而言之，通过使用这些CSS属性，您可以获得自动省略号：

white-space:pre;
overflow:hidden;
text-overflow: ellipsis;

（这要求您对标题设置宽度约束，使其首先不会比图像宽。）

Answer 2

您可以使用伪元素:after

执行此操作

.yourElement:after {
    content: "...";
    display: inline-block;
}

适用于IE7 +

如何在很长的标题（引导程序）结尾处显示“...”

2 个答案: