How to display “…” at the end of a very long title (bootstrap)

Question

I did a thumbnail with some images . I'm using bootstrap.

Below each image I want to put a title .

The problem is when the title is too large, it breaks to a second line , making the thumbnail become disorganized .

I wonder if there is any way to do the following rule ...

If the title be greater than the width of the picture it displays "..." and when you hover over it displays any title .

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

Edit

Solution:

Using:

 p.classname{ white-space:pre; overflow:hidden; text-overflow: ellipsis; width: 200px; } p.classname:hover{ text-overflow: inherit; overflow: visible; } 

Answer 1

In short and general, you get the automatic ellipsis by using these CSS properties:

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

(This requires you to have a width constraint on your caption so that it won't be wider than your image in the first place.)

Answer 2

You could do this with a pseudo element :after

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

works IE7+