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

Question

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 1

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>