prash prash - 7 months ago 62
HTML Question

How can I show dots ("...") in a span with hidden overflow?

My CSS:

#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}


Now it's showing content content

But I want to show like
content content ...

I need to show dots after contents. Contents are coming dynamically from database.

Answer

For this you can use text-overflow: ellipsis; property. Write like this

#content_right_head span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

Check this http://jsfiddle.net/Y5vpb/