如何在非常長的標題（引導程序）的末尾顯示“…”

Question

我對一些圖像做了縮略圖。 我正在使用引導程序。

在每個圖像的下方，我想添加一個標題。

問題是標題過大時，它會折斷到第二行，從而使縮略圖變得混亂。

我想知道是否有任何方法可以執行以下規則...

如果標題大於圖片的寬度，則顯示“ ...”，當將鼠標懸停在標題上時，將顯示任何標題。

 <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 +