jQuery：続きを読む

長い文章を表示する際に、文章の途中までを表示し、残りは「続きを読む」をクリックした際に表示するといった動作。
ブログ等でよくやられていますね。
これを jQuery で実現する方法について、簡単に紹介します(^_^;

jTruncate

http://www.jeremymartin.name/projects.php?project=jTruncate

基本的には、これを使えば「続きを読む」は簡単に実現できます。
しかしながら、jTruncate はアルファベット的な言語が前提なので、単語単位の区切りを空白でしか適用してくれないので、日本語ではまったく使えません。

jTruncSubstr

jTruncate の日本語の問題点を解消したのが、jTruncSubstr です。

http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr

jTruncSubstr は、単語単位ではなく文字列長で切り捨てる動作が追加されているので、日本語でもまったく問題がありません。
また、区切り文字を空白以外にも指定できるようなっているようなので、例えば句読点等で切り捨てることも可能なようです。

Readmore.js

http://jedfoster.com/Readmore.js/

上２つとは若干異なるアプローチで「続きを読む」を実現できるのが Readmore.js です。
Readmore.js は、単語や文字列長ではなく、単純にコンテンツの高さで残りを切り捨てます。
つまり、何文字目以降は切り捨てる、、、といった仕様ではなく、何行目以降は切り捨てる、、、といった仕様であれば、Readmore.js を使った方が良いですね。
また、高さを区切りとしているため、テキスト以外（例えば画像とか）でも適用出来るところが素晴らしいです。

私自身は、個人的には、「続きを読む」は Readmore.js を使うことで落ちつきました(^_^;