Back to all resources
CSS
text overflow
ellipsis
single line text

Ellipsis text

By Jared Malan
This CSS class, .truncate-width, is designed to handle text overflow within an element. It sets the element's width to 100%, ensuring it takes up the full width of its parent container. The white-space: nowrap property prevents the text from wrapping to the next line, keeping it on a single line. The overflow: hidden property hides any text that exceeds the element's width, and the text-overflow: ellipsis property adds an ellipsis ("...") at the end of the truncated text to indicate that there is more content that is not visible.