Sometimes, we want to add Overflow:hidden dots at the end with CSS.
In this article, we’ll look at how to add Overflow:hidden dots at the end with CSS.
How to add Overflow:hidden dots at the end with CSS?
To add Overflow:hidden dots at the end with CSS, we use the text-overflow property.
For instance, we write
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique
sapien magna, non porttitor leo blandit vitae. Sed eget odio at eros
scelerisque consequat sit amet a dolor.
</div>
to add a div.
Then we write
div {
width: 100px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
to add white-space: nowrap; to make all the text show in 1 row.
Then we add overflow: hidden; to hide any overflow text.
And we use text-overflow: ellipsis; to add ellipsis after the truncated text.
Conclusion
To add Overflow:hidden dots at the end with CSS, we use the text-overflow property.
