electricg · February 4, 2013 13:36 · electricg · Feb 4, 2013
diff --git a/demo.html b/demo.html
 <!DOCTYPE HTML>
 <html>
 <head>
  <style>
 .ellipsis {
 	max-height: 200px;
 	overflow: hidden;
 	position: relative;
 }
 .js-ellipsis > *:first-child {
 	display: inline;
 }
 .ellipsis > *:first-child {
 	float: right;
 	width: 100%;
 	margin-left: -5px;
 }
 .ellipsis .more {
 	bottom: 0;
 	position: absolute;
 	right: 0;
 	text-align: right;
 	width: 7em;
 	background: -webkit-gradient(linear, left top, right top,
 		from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
 	background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);			
 	background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
 	background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
 	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
 }
 .js-ellipsis .more {
 	cursor: pointer;
 }
 .js-ellipsis .more:before {
 	color: red;
 	content: "";
 }
 .js-ellipsis .more:after {
 	color: blue;
 	content: "Read Less";
 }
 .ellipsis .more:before {
 	content: "\02026";
 }
 .ellipsis .more:after {
 	content: " Read More";
 }


 .block {
 	
 	/*line-height: 25px;*/
 	outline: 1px solid #AAA;
 	/*width: 400px;*/
 }
 	</style>
 </head>
 <body>
 	<div class="js-ellipsis block">
 		<div>
 			Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.
 			
 		</div>
 	</div>

 	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eveniet cum impedit exercitationem repudiandae esse repellendus consequatur laborum voluptatibus voluptate dolores voluptatum? Doloremque ipsa blanditiis reiciendis labore a sunt illum suscipit aliquid explicabo dolore enim sequi debitis cumque necessitatibus maxime esse velit eveniet eos quae accusantium laboriosam neque impedit minima dolorem repellendus modi eius ex similique itaque ducimus quos qui veniam veritatis? Eum ducimus neque tempore distinctio quibusdam aliquid obcaecati suscipit eius quod reprehenderit itaque mollitia quidem explicabo maiores ipsam deleniti temporibus autem nihil hic praesentium. Asperiores amet eos in a delectus aliquid officiis blanditiis beatae aut minima nemo consectetur.</div>

 <script src="/lib/js/jquery-1.7.2.min.js"></script>
 <script>
 (function($) {

 	var $ellipsisMore = $('<span class="more"></span>'),
 		$ellipsis = $('.js-ellipsis');
 	$ellipsisMore.click(function(e) {
 		e.preventDefault();
 		$ellipsis.toggleClass('ellipsis');
 	});
 	$ellipsis.addClass('ellipsis').append($ellipsisMore);

 })(jQuery);
 </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	.ellipsis {
	max-height: 200px;
	overflow: hidden;
	position: relative;
	}
	.js-ellipsis > *:first-child {
	display: inline;
	}
	.ellipsis > *:first-child {
	float: right;
	width: 100%;
	margin-left: -5px;
	}
	.ellipsis .more {
	bottom: 0;
	position: absolute;
	right: 0;
	text-align: right;
	width: 7em;
	background: -webkit-gradient(linear, left top, right top,
	from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
	background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
	background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
	background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
	}
	.js-ellipsis .more {
	cursor: pointer;
	}
	.js-ellipsis .more:before {
	color: red;
	content: "";
	}
	.js-ellipsis .more:after {
	color: blue;
	content: "Read Less";
	}
	.ellipsis .more:before {
	content: "\02026";
	}
	.ellipsis .more:after {
	content: " Read More";
	}


	.block {

	/line-height: 25px;/
	outline: 1px solid #AAA;
	/width: 400px;/
	}
	</style>
	</head>
	<body>
	<div class="js-ellipsis block">
	<div>
	Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can.

	</div>
	</div>

	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eveniet cum impedit exercitationem repudiandae esse repellendus consequatur laborum voluptatibus voluptate dolores voluptatum? Doloremque ipsa blanditiis reiciendis labore a sunt illum suscipit aliquid explicabo dolore enim sequi debitis cumque necessitatibus maxime esse velit eveniet eos quae accusantium laboriosam neque impedit minima dolorem repellendus modi eius ex similique itaque ducimus quos qui veniam veritatis? Eum ducimus neque tempore distinctio quibusdam aliquid obcaecati suscipit eius quod reprehenderit itaque mollitia quidem explicabo maiores ipsam deleniti temporibus autem nihil hic praesentium. Asperiores amet eos in a delectus aliquid officiis blanditiis beatae aut minima nemo consectetur.</div>

	<script src="/lib/js/jquery-1.7.2.min.js"></script>
	<script>
	(function($) {

	var $ellipsisMore = $('<span class="more"></span>'),
	$ellipsis = $('.js-ellipsis');
	$ellipsisMore.click(function(e) {
	e.preventDefault();
	$ellipsis.toggleClass('ellipsis');
	});
	$ellipsis.addClass('ellipsis').append($ellipsisMore);

	})(jQuery);
	</script>
	</body>
	</html>