When a string of text overflows the boundaries of a container it can make a mess of your whole layout. Here’s a cool trick to handle text overflow by truncating long strings with a CSS ellipsis.
Text Overflow (with a CSS Ellipsis)
Our Overflowing Text Demo
During this quick tip we’ll use the following demo to show how text overflow works:
When Text is Too Long
Long text strings, which don’t have spaces and are contained within something that’s not as wide, will naturally overflow beyond the boundaries of the container (like this email address in the screenshot below):
As you can see, it makes a real mess.
Add the CSS Overflow Property
With one simple property we can clean this up. By adding overflow: hidden; to the paragraph which holds the email address, we will hide anything which doesn’t fit the container:
Solved! We’ve successfully truncated the long text.
Better Truncation with CSS Ellipsis
Our layout looks better, but it isn’t as practical. We’ve actually made the emails display inaccurately, effectively giving misinformation to the user. However, by adding the text-overflow: ellipsis; rule to our email string we’ll get the following:
The ellipsis is the 3 dots … Now the user can see the layout properly and thanks to the CSS ellipsis they’re aware that there’s more to the email addresses than is being shown.
Note: this works only when the overflow and text-overflow properties are used together.
Other text-overflow Values
There are other values you can use instead of ellipsis:
clip (which is the default value) effectively cuts the string short, and will cut strings mid-character too:
fade (which sounds amazing, but isn’t remotely supported by any browsers).
" " (an empty string) appends the truncated string with whatever’s defined and prevents it being cut off mid-character. This could be "-" for example, or even text-overflow: " ✁";
Note: browser support for these alternative values isn’t as good as with ellipsis. The screenshots above are from Firefox, but Chrome defaults to clip in these cases.
Conclusion
That’s all for this quick tip! Good luck using CSS ellipsis (ellipses?) in your own web designs.
- CSS text-overflow on MDN
- text-overflow on Caniuse
