En el siguiente ejemplo veremos como limitar a un número determinado los caracteres que pueden albergar un elemento, en este caso se tratará de un div, en el ejercicio el div contendrá más de 100 caracteres, y a través de una función limitaremos su contendido a un máximo de 100 caracteres con su correspondientes puntos suspensivos, a modo de text-overflow: ellipsis; en CSS3, ...
DEMO DIV ...
Este div contiene más de 100 caracteres por lo tanto la función ellipsis_box(".limitado", 100) limitará su contenido, en un máximo de 100 caracteres + sus correspondientes puntos suspensivos, ¿fácil no?
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function ellipsis_box(elemento, max_chars)
{
limite_text = $(elemento).text();
if (limite_text.length > max_chars)
{
limite = limite_text.substr(0, max_chars)+" ...";
$(elemento).text(limite);
}
}
$(function()
{
ellipsis_box(".limitado", 100);
});
</script>
</head>
<body>
<div class="limitado">
Este div contiene más de 100 caracteres por lo tanto la función ellipsis_box(".limitado", 100) limitará su contenido, en un máximo de 100 caracteres + sus correspondientes puntos suspensivos, ¿fácil no?
</div>
</body>
</html>
Keywords: limitar, caracteres, jquery, función, text-overflow, ellipsis, equivalente
No hay comentarios:
Publicar un comentario