jquery.shorten
Version:
jQuery plugin to automatically shorten text in a DIV and add "show more" link.
47 lines (35 loc) • 1.97 kB
HTML
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../src/jquery.shorten.js"></script>
<TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
<style>body {font-family: Calibri} div { width: 400px; margin:20px; padding:10px;}</style>
</HEAD>
<BODY>
<br/>
<div class="comment">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit. Vestibulum laoreet, <i>nunc eget laoreet sagittis, quam ligula</i></strong> sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment">
Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment">
consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit. Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum. Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>
<div class="comment"><br>Duisds nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. <img alt="chicken" src="http://img.smileys.nl/466/chicken.gif">Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment-small">
A quick brown fox jumps over a lazy dog
</div>
<div class="comment-small">
<a href="http://foo/bar/someverylongtextwithfoofoofoofoo">foo</a> bar
</div>
<script language="javascript">
$(document).ready(function() {
$(".comment").shorten();
$(".comment-small").shorten({showChars: 10});
});
</script>
</BODY>
</HTML>