Shave.jsプラグインを使用した動的な切り捨てテキスト

ほとんどのWordPressブログは投稿からプレビューテキストを表示するために "もっと読む"機能を使います。このテキストはスペースを節約するために、そして特定の時点で切り捨てられて切り取られます。 読み続けるために読者にさらにクリックするよう奨励する.

しかし時には、この機能を単一のページに追加したいことがあるでしょう。 Shave.jsと入力してください。 動的にコンテンツを切り捨てる.

このプラグインの素晴らしい点は、これまで見た中で最も面白い広告の1つを作ったチームであるDollar Shave Clubによって作成されたことです。彼らのチームがGitHubページさえ持っていることさえ知らなかったが、それはオリジナルとフォークの両方のリポジトリでいっぱいである.

この特定のプラグインはかなり新しく、それはすでに800+スターを持っています。依存性がないので ブラウザや他のライブラリに関係なく、普通のJavaScriptで実行できます。.

コードの設定もとても簡単です。 剃る（） 2つのパラメータのみを取る関数 要素セレクター そして 最大の高さ その要素のために。これは非常に基本的な例です。

 最大高さ= 320。 shave（ '。elemclass'、maxheight）; 

当然あります カスタム文字に渡すことができる追加のパラメータ 切り捨てられたテキストの後 ひげ剃り効果を適用する複数のセレクタ.

あなたは実際にShaveプラグインサイトでライブデモを見ることができます、そして彼らも素敵なCodePenデモを持っています.

ひげをそる jQueryまたはZeptoで作業する あなたがそれらのライブラリのどちらかを好むならば。でもそれ以来 バニラJSで動作します それはあなたのサイトにドロップして使用を開始するための最も簡単なプラグインの一つです。.

テキストを切り捨てるシナリオはそれほど多くはありませんが、その場合は、すべてのコードを自分で作成するよりもShaveのようなプラグインを使用する方がはるかに簡単です。.

はじめに、GitHubリポジトリからコピーをダウンロードするか、npmのようなリポジトリからコピーしてください。また、GitHubレポジトリに関するガイドラインやドキュメントも用意されているので、文字通りコピーして貼り付けて、ひげをそることができます。!