Texto truncado dinámico con el complemento Shave.js

La mayoría de los blogs de WordPress utilizan la función "leer más" para mostrar la vista previa del texto de una publicación. Este texto se trunca y se corta en un cierto punto para ahorrar espacio y para animar a los lectores a seguir haciendo clic para seguir leyendo.

Pero a veces querrá agregar esta función en una sola página. Introduzca Shave.js, el complemento de JavaScript creado para contenido truncado dinámicamente.

Un hecho interesante acerca de este complemento es que fue creado por Dollar Shave Club, el equipo que hizo uno de los anuncios más divertidos que he visto en mi vida. No sabía que su equipo tenía una página de GitHub pero está llena de repositorios originales y bifurcados..

Este complemento en particular es bastante nuevo y ya tiene más de 800 estrellas. Es libre de dependencias por lo que se puede ejecutar en JavaScript plano sin importar el navegador u otras bibliotecas incluidas.

Configuración de código también es bastante simple con el afeitado() Función solo teniendo dos parámetros: un selector de elementos y un Altura máxima por ese elemento Aquí hay un ejemplo muy básico:

 maxheight = 320; afeitado ('. elemclass', maxheight); 

Naturalmente hay Parámetros extra que puedes pasar para personajes personalizados. después del texto truncado, o Múltiples selectores donde desea aplicar el efecto de afeitado..

Puedes ver una demostración en vivo en el sitio del complemento Shave y también tienen una buena demostración CodePen.

Afeitado está construido para trabajar en jQuery o Zepto Si prefieres alguna de esas bibliotecas. Pero ya que también corre en vainilla JS Es uno de los complementos más fáciles de colocar en su sitio y comenzar a usar.

No hay demasiados escenarios en los que quieras truncar el texto, pero cuando lo haces es mucho más fácil usar un complemento como Shave que escribir todo el código tú mismo..

Para comenzar, descargue una copia del repositorio de GitHub o extraiga de un repositorio como npm. También encontrará pautas y documentación en el repositorio de GitHub para que, literalmente, solo pueda copiar, pegar y afeitarse.!