ещё вариант обрезния строк
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
display: block;
text-align: right;
}
div.more {
display: none;
}
.ta{
margin: 20px auto;
background:#3C3;
color:#66F;
width:600px}
</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",
resize: true
}, options);
if (o.resize) {
var opt = jQuery.extend({}, o, {
resize: false
});
var elem = this;
$(window).resize(function() {
$("." + o.classNew, elem).remove();
$(elem).correctLines(opt)
})
}
return this.each(function(index, self) {
$(self).find("*:last").length && (self = $(self).find("*:last"));
var txt = $(self).data("text") ||
$(self).data("text", $(self).html().split(" ")).data("text");
$(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.afterLength + o.moreText);
if (lastHeight < $(self).outerHeight()) {
lastHeight = $(self).outerHeight();
k++;
if (k > o.maxLine) {
i--;
$(self).html(txt.slice(0, i).join(" ") + o.afterLength);
if (o.fullText) {
var div = $("<div/>", {
"text": txt.slice(i).join(" "),
"class": o.classNew
}).appendTo($(self)) ;
$("<a/>", {
"text": o.moreText,
"class": o.classNew
}).click(function() {
var text = $(this).text() == o.moreText ?
o.lessText : o.moreText;
$(this).text(text)
div.slideToggle();
}).appendTo($(self));
}
break
}
}
}
if (k <= o.maxLine) $(self).html(txt.join(" "))
})
}
})(jQuery);
</script>
<title></title>
</head>
<body >
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div>
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий.
</div>
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div>
<script>
$(".ta").correctLines({
fullText: true,
maxLine: 4,
moreText: "Открыть все",
lessText: "Свернуть",
afterLength: " "
})
</script>
</body>
</html>