Show truncated string with dots appended with CSS3

Showing starting few words of a long text by not using client side or server side coding with three dots ahead

Have you ever thought of showing starting few words of a long text by not using client side or server side coding with three dots ahead?

Like: a quick brown fox jumps…

You may take example of showing mail content, product reviews.. These are generally of quite long length. But just to provide some idea on what the mail or the review context is, we may like to show the initial few words of the same.

The task may be looking pretty easier. We can make use of server side code to truncate and show the text with three dots or else we can simply go  for javascript or jQuery and the things are done..

But let me help you bit more.. You may not have to write a single line of client side or server side coding.. Surprised? Yes its possible. Just follow below method and then bingo.

— Put your text to show in truncated manner in a div with some class name. Lets say, class is “truncatedText”

My complete text

-- now your css:

.truncatedText {
    white-space: nowrap;
    width: 250px;/* OR as much space that allows */
    overflow: hidden;
    text-overflow: ellipsis;
}

Now suppose you want to show : “a quick brown fox jumps over a lazy dog.”. But you have only space to show it still “jumps”, then it would be visible like:

“a quick brown fox jumps…”

So the key css property behind this is: “text-overflow: ellipsis”. This appends 3 dots to the text after truncating the string. It adjusts the text length as per the width of the div.

Give it a try. Hope you will like it.