rmosolgo/bootstrap-teaser.js

## bootstrap-teaser.js
$(function() {
        $('.teaser').each(function() {
                var el = $(this);
                var long_text = el.html()
                var n_sentences = el.attr("data-teaser-length") || 1;
                var short_text = el.html().split(/([\.\?\!])\s/, (n_sentences * 2) ).map(function(d, i) {return i % 2 == 0 ? d : d + " " }).join("")

                if (long_text != short_text) {
                        el.html('')
                        el.append(
                                "<span class='teaser-long'>" +
                                long_text +
                                "</span>" +
                                '<span class="teaser-short">' +
                                short_text +
                                "<span class='teaser-see-more text-info' style='cursor:pointer;margin-top:5px;display:block;' " +
                                "onclick='$(this).parent().hide();$(this).parent().siblings(\".teaser-long\").show();'> See more...</span>" +
                                "</span>"
                                )
                        el.children('.teaser-long').hide()
                }
        })

        $('.teaser-see-more')
                .mouseenter(function() {$(this).css("text-decoration", "underline")})
                .mouseleave(function() {$(this).css("text-decoration", "none")})

})

## index.html
<html>
	<head>
		<title>Boostrap-Teaser</title>
		<!-- jQuery is a dependency -->
		<script src='http://code.jquery.com/jquery-2.0.0.min.js'></script>
		<script src='bootstrap-teaser.js'></script>
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

	</head>
	<body>
		<div class='container'>
			<h1 class='page-header row-fluid'>
				Bootstrap-teaser
				<small>
					Examples with text and HTML
				</small>
			</h1>
			<h2 class='row-fluid'>
				Plain Text:
			</h2>
			<div class='row-fluid'>
				<p class='teaser span6'>
					Pellentesque porttitor augue id orci lobortis pellentesque vitae sit amet odio. Quisque fermentum elementum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed facilisis nunc eu mauris aliquet adipiscing ac interdum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget libero at erat convallis faucibus sed ac nulla. Nulla luctus tempor quam id consectetur. Quisque quis est diam, sed lobortis augue. Vivamus dapibus massa commodo velit vulputate sit amet fringilla tellus porttitor. Nam a mauris metus, non accumsan velit. Proin vel eros est, sed laoreet dolor. Quisque tempus nunc nec lorem tempus pharetra.
				</p>
				<p class='teaser span6' data-teaser-length=3>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem vel elit pretium fermentum a a lorem. Sed in vehicula sem. Mauris sodales tempus mollis. Quisque quis urna nisi. Fusce molestie neque eget metus blandit at facilisis mi pretium. Morbi at sapien nec lorem tempor convallis eget vel neque. Proin ullamcorper bibendum magna, sed condimentum eros tempus ut. Pellentesque dignissim venenatis purus, eu consectetur nibh egestas vel.
				</p>
			</div>
			<h2 class='row-fluid'>
				HTML content:
			</h2>
			<div class='row-fluid'>
				<p class='teaser span6'>
					<a href="#">Pellentesque porttitor</a> augue id orci lobortis <a href='#'>pellentesque vitae sit amet odio</a>. Quisque fermentum elementum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed facilisis nunc eu mauris aliquet adipiscing ac interdum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget libero at erat convallis faucibus sed ac nulla. Nulla luctus tempor quam id consectetur. Quisque quis est diam, sed lobortis augue. Vivamus dapibus massa commodo velit vulputate sit amet fringilla tellus porttitor. Nam a mauris metus, non accumsan velit. Proin vel eros est, sed laoreet dolor. Quisque tempus nunc nec lorem tempus pharetra.
				</p>
				<p class='teaser span6' data-teaser-length=3>
					<a href="#">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem vel elit pretium fermentum a a lorem. Sed in vehicula sem. Mauris sodales tempus mollis. Quisque quis urna nisi. Fusce molestie neque eget metus blandit at facilisis mi pretium. Morbi at sapien nec lorem tempor convallis eget vel neque. Proin ullamcorper bibendum magna, sed condimentum eros tempus ut. Pellentesque dignissim venenatis purus, eu consectetur nibh egestas vel.
				</p>
			</div>
		</div>
	</body>
	$(function() {
	$('.teaser').each(function() {
	var el = $(this);
	var long_text = el.html()
	var n_sentences = el.attr("data-teaser-length") \|\| 1;
	var short_text = el.html().split(/([\.\?\!])\s/, (n_sentences * 2) ).map(function(d, i) {return i % 2 == 0 ? d : d + " " }).join("")

	if (long_text != short_text) {
	el.html('')
	el.append(
	"<span class='teaser-long'>" +
	long_text +
	"</span>" +
	'<span class="teaser-short">' +
	short_text +
	"<span class='teaser-see-more text-info' style='cursor:pointer;margin-top:5px;display:block;' " +
	"onclick='$(this).parent().hide();$(this).parent().siblings(\".teaser-long\").show();'> See more...</span>" +
	"</span>"
	)
	el.children('.teaser-long').hide()
	}
	})

	$('.teaser-see-more')
	.mouseenter(function() {$(this).css("text-decoration", "underline")})
	.mouseleave(function() {$(this).css("text-decoration", "none")})

	})
	<html>
	<head>
	<title>Boostrap-Teaser</title>
	<!-- jQuery is a dependency -->
	<script src='http://code.jquery.com/jquery-2.0.0.min.js'></script>
	<script src='bootstrap-teaser.js'></script>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

	</head>
	<body>
	<div class='container'>
	<h1 class='page-header row-fluid'>
	Bootstrap-teaser
	<small>
	Examples with text and HTML
	</small>
	</h1>
	<h2 class='row-fluid'>
	Plain Text:
	</h2>
	<div class='row-fluid'>
	<p class='teaser span6'>
	Pellentesque porttitor augue id orci lobortis pellentesque vitae sit amet odio. Quisque fermentum elementum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed facilisis nunc eu mauris aliquet adipiscing ac interdum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget libero at erat convallis faucibus sed ac nulla. Nulla luctus tempor quam id consectetur. Quisque quis est diam, sed lobortis augue. Vivamus dapibus massa commodo velit vulputate sit amet fringilla tellus porttitor. Nam a mauris metus, non accumsan velit. Proin vel eros est, sed laoreet dolor. Quisque tempus nunc nec lorem tempus pharetra.
	</p>
	<p class='teaser span6' data-teaser-length=3>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem vel elit pretium fermentum a a lorem. Sed in vehicula sem. Mauris sodales tempus mollis. Quisque quis urna nisi. Fusce molestie neque eget metus blandit at facilisis mi pretium. Morbi at sapien nec lorem tempor convallis eget vel neque. Proin ullamcorper bibendum magna, sed condimentum eros tempus ut. Pellentesque dignissim venenatis purus, eu consectetur nibh egestas vel.
	</p>
	</div>
	<h2 class='row-fluid'>
	HTML content:
	</h2>
	<div class='row-fluid'>
	<p class='teaser span6'>
	<a href="#">Pellentesque porttitor</a> augue id orci lobortis <a href='#'>pellentesque vitae sit amet odio</a>. Quisque fermentum elementum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed facilisis nunc eu mauris aliquet adipiscing ac interdum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget libero at erat convallis faucibus sed ac nulla. Nulla luctus tempor quam id consectetur. Quisque quis est diam, sed lobortis augue. Vivamus dapibus massa commodo velit vulputate sit amet fringilla tellus porttitor. Nam a mauris metus, non accumsan velit. Proin vel eros est, sed laoreet dolor. Quisque tempus nunc nec lorem tempus pharetra.
	</p>
	<p class='teaser span6' data-teaser-length=3>
	<a href="#">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem vel elit pretium fermentum a a lorem. Sed in vehicula sem. Mauris sodales tempus mollis. Quisque quis urna nisi. Fusce molestie neque eget metus blandit at facilisis mi pretium. Morbi at sapien nec lorem tempor convallis eget vel neque. Proin ullamcorper bibendum magna, sed condimentum eros tempus ut. Pellentesque dignissim venenatis purus, eu consectetur nibh egestas vel.
	</p>
	</div>
	</div>
	</body>