横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」
2010年12月14日-
スポンサード リンク
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で計算する分確実な幅設定ができるのがいいですね。
ブログ等でもある「さらに読む」を簡単に実現できますね。
関連エントリ
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。
ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。
$(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。
.shorten({width: 400, tail: '<a href="">...more</a>'}) のように使います。
絶対のこの幅に収めたいという場合に使えます。
PHPなどでやるよりも幅をJavaScriptで計算する分確実な幅設定ができるのがいいですね。
ブログ等でもある「さらに読む」を簡単に実現できますね。
関連エントリ
- これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン
- Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」
- 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」
関連の記事検索:JavaScript, plugin
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ