홈페이지 » 웹 디자인 » Shave.js 플러그인을 사용한 동적 잘린 텍스트

    Shave.js 플러그인을 사용한 동적 잘린 텍스트

    대부분의 WordPress 블로그는 "read more"기능을 사용하여 게시물의 미리보기 텍스트를 표시합니다. 이 텍스트는 잘라내어 특정 지점에서 잘라내어 공간을 절약하고 독자들이 더 읽기를 계속하도록 격려한다..

    그러나 때로는이 기능을 단일 페이지에 추가하려고합니다. Shave.js를 입력하십시오. 동적으로 내용을 자르는.

    이 플러그인에 대한 멋진 사실은 그것이 내가 본 중에 가장 재미있는 광고 중 하나를 만든 Dollar Shave Club에 의해 만들어 졌다는 것입니다. 나는 그들의 팀이 심지어 GitHub 페이지를 가지고 있었다는 것을 알지 못했지만 원래와 갈래의 저장소가 꽉 찼다..

    이 플러그인은 상당히 새롭고 이미 800 개 이상의 별을 보유하고 있습니다. 의존성이 없으므로 브라우저 나 다른 포함 된 라이브러리에 관계없이 일반 JavaScript에서 실행할 수 있습니다..

    코드 설정도 매우 간단합니다. 깎다() 함수는 두 개의 매개 변수만을 사용합니다. 요소 선택자최대 높이 그 요소에 대해. 다음은 매우 기본적인 예입니다.

     maxheight = 320; 면도 ( '. elemclass', maxheight); 

    당연히 거기 사용자 정의 문자를 전달할 수있는 추가 매개 변수 잘린 텍스트 뒤에 또는 면도 효과를 적용하려는 여러 선택기.

    Shave 플러그인 사이트에서 실제로 라이브 데모를 볼 수 있으며 좋은 CodePen 데모도 있습니다..

    면도기가 내장되어 있습니다. jQuery 또는 Zepto에서 작업 당신이 그 도서관 중 하나를 선호한다면. 그러나 그 이후로 바닐라 JS에서 실행됩니다. 사이트에 들어가서 사용하기 쉬운 플러그인 중 하나입니다..

    텍스트를 자르려는 시나리오가 너무 많지는 않지만, 할 때 Shave와 같은 플러그인을 사용하는 것이 훨씬 쉽습니다. 모든 코드를 직접 작성하는 것.

    시작하려면 GitHub 저장소에서 복사본을 다운로드하거나 npm과 같은 저장소에서 가져옵니다. 문자 그대로 복사, 붙여 넣기 및 면도를 할 수 있도록 GitHub 레포에 대한 지침과 설명서도 제공됩니다.!