Вот в целом скрипт, ни как не могу разобраться как должен выглядеть css код для слова "подробнее", чтобы придать ему местоположение и т. д. Если есть скрипт получше, буду рад)! Особенно есть он будет более плавным.
<!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="readmore">
<p>
text / text / text / text / text / text / text / text / text / text / text / text / text / text / text / text / text
</p>
</div>
<script type="text/javascript">
$('.readmore').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>
Простой
Простой