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 can set a few CSS properties.

For instance, we write

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

to set the elements with class ellipsis to have various styles.

We set white-space to nowrap to stop text from wrapping.

overflow is set to hidden to hide overflowing text.

text-overflow is set to ellipsis to truncate overflowing text and add a ellipsis after the end of the truncated text.

The styles will be applied when the selected element has a set width.

Conclusion

To insert ellipsis (…) into HTML tag if content too wide with CSS, we can set a few CSS properties.