Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれるjQueryプラグインです。いわゆるmoreタグを生成させることができます。リンクになっているのでこれをクリックすると全文が表示されます。
Shorten
以下はShortenの実際のデモページになります。
moreをクリックすると短縮された分のテキストが表示されます。全部表示されるとmoreはlessというリンクになるので、lessをクリックすると短縮された状態に戻ります。
この手の機能はコメントやレビューなどに使われているのをよく見かけます。シンプルな機能ですが、そのぶん使いどころはたくさんありますね。
テキスト量が多くて見辛い時やスペースを有効的に活用したい時なんかにも役立つかと思います。
セッティングに関してもこのようにとてもシンプルで使い易いです。
$(element).shorten();
「more」や「less」といった文字は自分の好きなものにカスタマイズすることもできます。
$(element).shorten({
moreText: 'read more',
lessText: 'read less'
});
その他にも短縮された状態で表示させる文字数を指定したりといったことも可能です。
というわけで、長いテキストを自動的に短縮させて表示・非表示できるような機能を実装したい方は是非チェックしてみてください。
Shortenのダウンロードや詳しい使い方は以下からどうぞ。
