CSS showing overflowing text using “….”

It always annoyed me when a title or a paragraph is not big enough to fit all text and I would have to shorten it using javascript and append a “…” to show that there is more text. Now, I discovered that there is a way to do this using ONLY CSS!!!! Which I think is AWESOME…. Here it goes… very simple:

h1 {

width: 500px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

 

Using “overflow:hidden”, as we all should know by now, sets the overflow of the h1 (or whatever element in use) hidden, making all text outside the element hidden too. Meanwhile, “white-space: nowrap” is used to avoid having the text breaking over different lines. We want out title to fit in a line. Finally, “text-overflow: ellipsis” is telling the browser that IF there is an overflow of text, add “…” at the end of the text before the rest is hidden.

Hope this is as helpful to you as it was was for!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s