To give a List of the paragraph content with 3 dots (…)

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

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.
We can do this either in css or jquery way, let’s see both methods.

JS


<!doctype html>

<html lang=”en”>

<head>

<style>

#fos{ width: 300px; height: 190px; overflow: hidden; }

#fos p { padding: 10px; margin: 0; }

</style>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

<script>

$( document ).ready(function() {

var p=$(‘#fos p’);

vardivh=$(‘#fos’).height();

while ($(p).outerHeight()>divh) {

$(p).text(function (index, text) {

returntext.replace(/\W*\s(\S)*$/, ‘…’);

});

}

});

 

</script>

<meta charset=”utf-8″>

<body>

<div id=”parent”>

<p>Loremipsum dolor sit amet, consecteturadipiscingelit. Proin nisi ligula, dapibus a volutpat sit amet, mattiset dui. Nuncporttitoraccumsanorci id luctus. Phasellusipsummetus, tincidunt non rhoncus id, dictum a lectus. Nam sedipsum a lacus sodaleseleifend. Vestibulumloremfelis, rhoncuselementumvestibulumeget, dictum utvelit. Nullamvenenatis, elit in suscipitimperdiet, orcipurusposueremauris, quisadipiscingipsumurna ac quam.</p>

</div>

 

</body>

</html>
In html part we have div of class parent having a child element

its height is fixed with css.
Now in the script part we have the magical part ,what we do is we check the height of the content holder in our case it’s the div element, and then we check if the height of the

is within the height of the div element then while the text of the

outside the height of the height of the div,we get the text by its index and replace it with … Isn’t it simple but it has a drawback, if the text size is large then the while loop runs unnecessary. So we ll see the css method.

CSS

We can achieve the same easily by using the css property-ellipsis;

#fos p { width: 250px;
white-space: nowrap;
word-wrap:break-word;
overflow: hidden;
text-overflow: ellipsis; }

So is css method perfect?No it has its own problem if you look at the output we get only a single line output we can’t make it multiline.

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.

Working plunker link: http://plnkr.co/edit/1yMJtpcORrKSP6UXCneW?p=preview

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather