How to show dots (“…”) in a span with hidden overflow with CSS?

Spread the love

Sometimes, we want to show dots ("…") in a span with hidden overflow with CSS.

In this article, we’ll look at how to show dots ("…") in a span with hidden overflow with CSS.

How to show dots ("…") in a span with hidden overflow with CSS?

To show dots ("…") in a span with hidden overflow with CSS, we set make the span an inline-block element.

For instance, we write

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

to add a span.

Then we write

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

to make the span an inline block element with display: inline-block;.

We hide the overflow with overflow: hidden !important;.

The width is set with width: 180px;.

We make the text stay in 1 row with white-space: nowrap;.

And we add an ellipsis to the truncated text with text-overflow: ellipsis;.

Conclusion

To show dots ("…") in a span with hidden overflow with CSS, we set make the span an inline-block element.

Leave a Reply

Your email address will not be published. Required fields are marked *