<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style type="text/css">
.overflow{height:120px;overflow:hidden;}
</style>
</head>
<body>
<div class="div">
<p>
Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
</p>
</div>
<script type="text/javascript">
$('.div').each(function() {
if($(this).height()>=150) {
var p=$('p',this),
a=$('<a>',{
'href':'',
'class':'click'
});
p.addClass('overflow');
a.text('подробнее');
$(this).append(a);
a.click(function() {
if(p.hasClass('overflow')) {
p.removeClass('overflow');
a.text('скрыть');
} else {
p.addClass('overflow');
a.text('подробнее');
}
return false;
});
}
});
</script>
</body>
</html>