JQuery Expander com a propriedade Max-Lines
Pergunta
Eu realmente penso plug -in do JQuery Expander é ótimo, mas não pode satisfazer minhas necessidades. Ele reduz o texto e coloca um botão "Leia mais" após o texto que expande o texto. Mas ele só corta quando o comprimento do texto é mais do que um valor especificado. Mas e se o texto for:
Some text: Blah blah
O texto usa tanto espaço quanto um texto com muitos caracteres, mas o expansor não o cortará. Eu quero ter uma propriedade Max Lines para que eu possa restringir tanto o comprimento do texto quanto as linhas máximas. Alguma sugestão de plug -in?
Solução
Eu construí este jQuery que é parcialmente retirado do link de Fudgey. Infelizmente, ele usa PX em vez de EM porque preciso comparar a altura da div com .Height (). Também pode ser mais bonito chegar a uma função, mas funciona :)
$(document).ready(function () {
var maxlines = 12;
var lineheight = 15; // line height in 'px'
var maxheight = (maxlines * lineheight);
var allowedExtraLines = 3;
var showText = "Læs mere...";
var hideText = "Skjul tekst...";
$('.Truncate').each(function () {
var text = $(this);
if (text.height() > maxheight + allowedExtraLines * lineheight) {
text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
var link = $('<a href="#">' + showText + '</a>');
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
//$(this).remove();
$(this).html(hideText);
text.css('height', 'auto');
}
});
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
}
});
});