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.
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”
<div class="truncatedText">My complete text</div>
-- now your css:
width: 250px;/* OR as much space that allows */
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.