前の記事 ≪:2010年12月13日 管理人のブックマーク
次の記事 ≫:Chrome、IE、Firefox 上で JavaScript を一括で同時に実行させることが出来る...

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」

2010年12月14日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Shorten - A jQuery Plugin for Truncating Styled Text

横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。
ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。
$(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。



.shorten({width: 400, tail: '<a href="">...more</a>'})  のように使います。

絶対のこの幅に収めたいという場合に使えます。

PHPなどでやるよりも幅をJavaScriptで計算する分確実な幅設定ができるのがいいですね。
ブログ等でもある「さらに読む」を簡単に実現できますね。

関連エントリ
関連の記事検索:JavaScript, plugin
スポンサード リンク

By.KJ : 2010年12月14日 09:10 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)