Fiz um script, curto, simples, que trunca o texto selecionado recebendo a quantidade máxima de caracteres, e coloca um link para o usuário expandir/esconder o texto.
Além de ser leve tem a vantagem de manter o conteúdo do elemento original, permitindo assim a visualização do mesmo caso o browser não carregue javascript corretamente.
var len = $("#longText").text().length; if (len > maxCharacters) { var truncated = $("#longText").text(). substring(0, maxCharacters); truncated = truncated.replace(/\w+$/, ''); var spanTruncate = ""; $("#longText").after(spanTruncate); $("#longText").hide(); $("#truncate").html(truncated); var linkToggle = "
more" $("#truncate").after(liknToggle); $("#truncate").show(); }
O evento para quando o usuário clicar no link expandir/esconder:
$("#toggle").click(function(event) { event.preventDefault(); if ($(this).html() == "hide") { $("#longText").hide(); $("#truncate").show(); $(this).html("more"); } else { $("#truncate").hide(); $("#longText").show(); $(this).html("hide"); } });
O código completo, com um exemplo de como utilizar, está disponibilizado no meu Github, para que possa ser melhorado sempre por quem estiver interessado em contribuir com o projeto.
Nenhum comentário:
Postar um comentário