Saturday March 27, 2021 By David Quintanilla
How to Handle Text Overflow (with a CSS Ellipsis)

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.

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 large, will naturally overflow past the boundaries of the container (like this electronic mail tackle within the screenshot under):

text is too long!

As you’ll be able to see, it makes an actual mess.

Add the CSS Overflow Property

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:

overflow: hidden

Solved! We’ve efficiently truncated the lengthy textual content.

Higher Truncation with CSS Ellipsis

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:

text overflow ellipsis

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.

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 brief, and can minimize strings mid-character too:

clipped text

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: " ✁";


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.

Source link