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

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):

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 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:

overflow: hidden

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:

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.

Notice: 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 quick, and can reduce 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 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.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *