如何在很长的标题(引导程序)结尾处显示"..."

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;

(这要求您对标题设置宽度约束,使其首先不会比图像宽.)