How to insert ellipsis (…) into HTML tag if content too wide with CSS?

Spread the love

Sometimes, we want to insert ellipsis (…) into HTML tag if content too wide with CSS.

In this article, we’ll look at how to insert ellipsis (…) into HTML tag if content too wide with CSS.

How to insert ellipsis (…) into HTML tag if content too wide with CSS?

To insert ellipsis (…) into HTML tag if content too wide with CSS, we set the overflow, text-overflow and white-space properties.

For instance, we write

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

to add white-space: nowrap; to make the content stay in 1 row.

overflow: hidden; hides any overflowing content.

And text-overflow: ellipsis; adds the ellipsis after the truncated content.

Conclusion

To insert ellipsis (…) into HTML tag if content too wide with CSS, we set the overflow, text-overflow and white-space properties.

Leave a Reply

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