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

css, html

Solution

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

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

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

JSFiddle

Problem

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.

Original source

Related problems