How to use text-overflow:ellipsis?

Question

I have the following html - http://jsfiddle.net/o8e4n30n/

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        <span class="txt">Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadsodio asdasda sdas dasdasdasda sdadadsads</span>
    </li>
</ul>

I want to use text-overflow ellipsis property so that only a single line is shown with a ... instead of the 3 lines which are shown now

i.e from

Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadsodio asdasda sdas dasdasdasda sdadadsads

to

Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasd…

Please advice.

Answer 1

I've updated your fiddle to add the necessary styling:

.list-group-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

The text must be in one line (hence the white-space: nowrap), and overflow a box where the overflow is hidden (hence the overflow: hidden).

I've applied the styles on the list element because it's a block level element by default. If you want to apply it on the span, you would have to add a display: block rule, or add a display: inline-block rule with an associated width.

Answer 2

You have to define a specific width and overflow for the element with text-overflow: ellipsis.

What about:

.list-group-item {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Follow this link to learn more.

Here is a Fiddle to play around.

Answer 3

USE:

text-overflow: ellipsis;
text-wrap:nowrap;
overflow:hidden;

Hope it helps