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.
