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.
