css - 如何在很长的标题( Bootstrap )的末尾显示 "..."

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;

(这要求您对标题进行宽度限制，使其首先不会比您的图像宽。)