antonio22,
скрипт, обрезающий строки
можно по строкам или символам
скрипт ниже работает с тегами любой вложености типа <p><span><b><b><b><b><b>ТУТ ТЕКСТ</b></b></b></b></b></span></p> достаточно указать любого из родителей
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
}
div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin: 6px;
margin-right: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.correctLines = function (options) {
var o = jQuery.extend({
maxLine: 5, //Видимое кол-во строк
afterLength: ' ... ', //Текст после видимого содержания
fullText: false, //Добавить ссылку для отображения скрытого текста
moreText: '\u00BB\u00BB', //Текст ссылки до показа скрытого содержания
lessText: '\u00AB\u00AB', //Текст ссылки после показа скрытого содержания
classNew: 'more', // Класс для ссылки и скрытого текста
symbol: 0 //Количество символов -- отменяет maxLine
}, options);
return this.each(function (index, self) {
$(self).find('*:last').length && (self=$(self).find('*:last'));
var txt = $(self).html().split(o.symbol ?'':' ');
$(self).html(txt[0]).css({
"height": "auto"
});
var lastHeight = $(self).outerHeight();
var k = 1,i;
for (i = 1; i < txt.length; i++) {
$(self).html(txt.slice(0, i).join(o.symbol ?'':' ') + o.afterLength + o.moreText);
if (lastHeight < $(self).outerHeight()||(o.symbol && o.symbol-2 < i)) {
lastHeight = $(self).outerHeight();
k++;
if (k > o.maxLine) {
i--;
$(self).html(txt.slice(0, i).join(o.symbol ?'':' ') + o.afterLength);
if (o.fullText) {
$("<a/>", {
"text": o.moreText,
"class": o.classNew
})
.click(function (event) {
var text = $(this).text() == o.moreText ? o.lessText : o.moreText;
$(this).text(text).nextAll("."+o.classNew).slideToggle()
event.preventDefault()
}).appendTo($(self));
$("<br/>").appendTo($(self))
$("<div/>", {
"text": txt.slice(i).join(o.symbol ?'':' '),
"class": o.classNew
})
.appendTo($(self))
};
break
}
};
};
if (k <= o.maxLine) $(self).html(txt.join(o.symbol ?'':' '));
});
}
})(jQuery);
</script>
<title></title>
</head>
<body >
<div class="bottom">
<div class="text">
<p><span><b><b><b><b><b>По умолчанию выводиться первые 70 символов. Если описание длиннее, в конце добавлять троеточие и ссылку "ещё" (пунктирное подчеркивание). При клике показывать полное описание (без перезагрузки страницы) со ссылкой в конце "скрыть" - при клике описания опять схлопывается до 60 символов.
Я видел готовый скрипт спрятоть/раскрыть текст, но там нету сиволов.
Помогите пожайлуста!</b></b></b></b></b></span></p>
</div>
</div><div class="bottom">
<div class="text2">
<p><span><b><b><b><b><b>По умолчанию выводиться первые 70 символов. Если описание длиннее, в конце добавлять троеточие и ссылку "ещё" (пунктирное подчеркивание). При клике показывать полное описание (без перезагрузки страницы) со ссылкой в конце "скрыть" - при клике описания опять схлопывается до 60 символов.
Я видел готовый скрипт спрятоть/раскрыть текст, но там нету сиволов.
Помогите пожайлуста!</b></b></b></b></b></span></p>
</div>
</div>
<script language="JavaScript" type="text/javascript">
$(".text p").correctLines({fullText: true,symbol: 70,moreText: " ещё", lessText : "скрыть" })
$(".text2 span").correctLines({fullText: true,maxLine: 2 })
</script>
</body>
</html>
