When a string of textual content overflows the boundaries of a container it may make a large number of your complete structure. Right here’s a cool trick to deal with textual content overflow by truncating lengthy strings with a CSS ellipsis.
Textual content Overflow (with a CSS Ellipsis)
Our Overflowing Textual content Demo
Throughout this fast tip we’ll use the next demo to point out how textual content overflow works:
When Textual content is Too Lengthy
Lengthy textual content strings, which don’t have areas and are contained inside one thing that’s not as huge, will naturally overflow past the boundaries of the container (like this e mail handle within the screenshot beneath):
As you’ll be able to see, it makes an actual mess.
Add the CSS Overflow Property
With one easy property we are able to clear this up. By including
overflow: hidden; to the paragraph which holds the e-mail handle, we are going to cover something which doesn’t match the container:
Solved! We’ve efficiently truncated the lengthy textual content.
Higher Truncation with CSS Ellipsis
Our structure seems to be higher, however it isn’t as sensible. We’ve really made the emails show inaccurately, successfully giving misinformation to the consumer. Nonetheless, by including the
text-overflow: ellipsis; rule to our e mail string we’ll get the next:
The ellipsis is the three dots … Now the consumer can see the structure correctly and due to the CSS ellipsis they’re conscious that there’s extra to the e-mail addresses than is being proven.
Notice: this works solely when the
text-overflow properties are used collectively.
Different text-overflow Values
There are different values you should utilize as an alternative of ellipsis:
clip (which is the default worth) successfully cuts the string quick, and can reduce strings mid-character too:
fade (which sounds superb, however isn’t remotely supported by any browsers).
" " (an empty string) appends the truncated string with no matter’s outlined and prevents it being reduce off mid-character. This could possibly be
"-" for instance, and even
text-overflow: " ✁";
Notice: browser assist for these different values isn’t nearly as good as with
ellipsis. The screenshots above are from Firefox, however Chrome defaults to
clip in these circumstances.
That’s all for this fast tip! Good luck utilizing CSS ellipsis (ellipses?) in your personal net designs.