How to add Overflow:hidden dots at the end with CSS?

Spread the love

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.

Leave a Reply

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