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