How to Control Text Overflow in Web Design (with a CSS Ellipsis)

How to Control Text Overflow in Web Design (with a CSS Ellipsis)

CSS3 version new text properties offer more control over the text rendering.

When a string of text overflows the boundaries of a container, it can mess your whole layout. Here’s a nifty trick to handle text overflow by trimming long lines with a CSS ellipsis.

Handling Text Overflow in CSS3 with CSS Ellipsis

Text can overflow when it is restricted from wrapping, for example, if the value of the CSS white-space property is set to nowrap for the containing component or a single word is too long to fit like a long email address.

You can apply the CSS3 text-overflow property to determine how will display the overflowed content in such a situation.

Let’s look at the following demo to show how text-overflow works:

When A Text is Too Long

On the web page, long text strings, which don’t have spaces and are included within something that’s not as wide, will usually overflow beyond the boundaries of the container (like this long text without word space in the screenshot below):

Control Text Overflow in Web Design (with a CSS Ellipsis)-min

As you can see above example, it makes a real mess.

Apply the CSS Overflow Property

With one simple CSS3 property, I fix the overflow issue. By adding overflow: hidden; to the text which holds long text without word space, I will hide all text which doesn’t fit the container:

Control Text Overflow in Web Design (with a CSS Ellipsis)-min

See? Solved! I’ve successfully trimmed the long text.

Better trimming with CSS Ellipsis property

Anyway, the layout looks better, but it isn’t as efficient. However, by adding the CSS text-overflow: ellipsis; rule to this ling text string, I’ll get the following result below:

How to Control Text Overflow in Web Design (with a CSS Ellipsis)-min

By adding CSS text-overflow: ellipsis; rules. The ellipsis is the three dots. Now the user can see the layout accurately, and thanks to the CSS ellipsis.

Conclusion

That’s all for this simple, quick tip! Good luck using CSS ellipsis rules in your web design.

You can find more details about CSS text-overflow on MDN.