CSS text-overflow

Notice: This is a beginner post (that some of you might think is a waste of time)

CSS3 has tons of awesome improvement, which a lot of them I don't know or notice. Today, I discovered "text-overflow" style, which is super handy for hiding overflowing text.

I discovered while browsing the source for Gmail.com. (Actually I was looking a the scrollbar for the side panel wondering how it works and accidentally stumble upon this :p ).

Notice the the longer text "Acquaintances" changes to "Acquaintan" when the width of the parent container shrinks.

The style behind this is

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

You might wonder why I'm so excited about this? Because in the past, I used to do a lot of text-length-checking on the server side before outputting the text, reducing the number of characters and append "...".

Now this can be done easily on the browser part using just CSS!

No more inefficient coding with the boated codes!


Popular posts from this blog


Generate GoDaddy SSL Certificate (.crt) for Azure Websites (.pfx)

Backup MySQL to Azure Storage in 30 Seconds