When a string of textual content overflows the boundaries of a container it could make a multitude of your entire structure. Right here’s a cool trick to deal with textual content overflow by truncating lengthy strings with a CSS ellipsis.
Throughout this fast tip we’ll use the next demo to point out how textual content overflow works:
Lengthy textual content strings, which don’t have areas and are contained inside one thing that’s not as large, will naturally overflow past the boundaries of the container (like this electronic mail tackle within the screenshot under):
As you’ll be able to see, it makes an actual mess.
With one easy property we will clear this up. By including overflow: hidden; to the paragraph which holds the e-mail tackle, we’ll conceal something which doesn’t match the container:
Solved! We’ve efficiently truncated the lengthy textual content.
Our structure appears higher, nevertheless it isn’t as sensible. We’ve truly made the emails show inaccurately, successfully giving misinformation to the consumer. Nevertheless, by including the text-overflow: ellipsis; rule to our electronic 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.
Observe: this works solely when the overflow and text-overflow properties are used collectively.
There are different values you should utilize as an alternative of ellipsis:
clip (which is the default worth) successfully cuts the string brief, and can minimize 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 minimize off mid-character. This may very well be "-" for instance, and even text-overflow: " ✁";
text-overflow: " ✁";
Observe: browser assist for these various 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 internet designs.
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.