Texto Truncado Dinâmico com o Plugin Shave.js

A maioria dos blogs do WordPress usa o recurso "leia mais" para mostrar o texto de visualização de uma postagem. Este texto é truncado e cortado em um certo ponto para economizar espaço e incentivar os leitores a clicar mais para continuar lendo.

Mas às vezes você vai querer adicionar esse recurso em uma única página. Digite Shave.js, o plugin JavaScript feito para truncando dinamicamente o conteúdo.

Um fato interessante sobre esse plugin é que ele é criado pelo Dollar Shave Club, a equipe que fez um dos anúncios mais engraçados que eu já vi. Eu não sabia que a equipe deles tinha uma página do GitHub, mas ela estava cheia de repositórios, originais e bifurcados..

Este plugin em particular é relativamente novo e já tem mais de 800 estrelas. É livre de dependência por isso pode ser executado em JavaScript simples, independentemente do navegador ou de outras bibliotecas incluídas.

A configuração de código também é bem simples com o barbear() funciona apenas com dois parâmetros: um seletor de elemento e um altura máxima para esse elemento. Aqui está um exemplo muito básico:

 maxheight = 320; barbear ('elemclass', maxheight); 

Naturalmente existem parâmetros extras que você pode passar por caracteres personalizados após o texto truncado, ou vários seletores onde você deseja aplicar o efeito de barbear.

Você pode realmente ver uma demonstração ao vivo no site Shave e eles também têm uma boa demonstração da CodePen.

O barbear é construído para trabalhar em jQuery ou Zepto se você preferir uma dessas bibliotecas. Mas como também é executado em baunilha JS é um dos plug-ins mais fáceis de acessar no seu site e começar a usar.

Não há muitos cenários em que você queira truncar o texto, mas quando você faz isso é muito mais fácil usar um plugin como o Shave do que escrever todo o código você mesmo.

Para começar, faça o download de uma cópia do repositório do GitHub ou retire-a de um repositório como o npm. Você também encontrará orientações e documentação sobre o repositório do GitHub para que possa literalmente copiar, colar e barbear!