Sometimes, if content too wide, we want to insert ellipsis (…) into HTML tag with CSS.
If content too wide, how to insert ellipsis (…) into HTML tag with CSS we will look at in this article.
How to insert ellipsis (…) into HTML tag if content too wide with CSS?
We can set a few CSS properties, to insert ellipsis (…) into HTML tag if content too wide.
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.
When the selected element has a set width the styles will be applied.
Conclusion
To insert ellipsis (…) into HTML tag , we can set a few CSS properties if content too wide with CSS.