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!