bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptボックス要素からはみ出した分のテキストを「...」に置き換えてくれるjQueryプラグイン「jQuery.dotdotdot」JavaScript2012.05.23ボックス要素からはみ出した分のテキストを「...」に置き換えてくれるjQueryプラグイン「jQuery.dotdotdot」なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuery.dotdotdot」を使ってみました。これとても便利ですね。ボックス要素に収まりきれずはみ出したテキストを「...」に置き換えてくれるプラグインです。使い方もとても簡単です。名前もそのとおりドットドットドットですね。[ads_center]使い方いつも通りhead内にjQuery本体とプラグインファイルを読み込みます。src="jquery.dotdotdot-1.4.2-packed.js"></script>そして収めたいボックス要素を指定します。$('#dot1').dotdotdot();});</script>マークアップはこんな感じで。id="dot1">サンプルテキストサンプルテキストサンプルテキスト...略...</div>これだけで、#dot1からはみ出した分のテキストを「...」に置き換えてくれます。「...」に置き換えただけだとその後のテキストが見れないので実際に使う場合には「続きを読む」といったリンクに置き換えるかと思います。この場合は以下のようにすると続きを読むためのリンクにすることができます。});});</script>オプションのafterにリンク先に指定してあるクラス名moreが付いたaタグを指定します。&raquo;</a></div>そして、テキストの最後にリンク先を追加します。これで、ボックスからはみ出した分のテキストが続きを読むリンク先に置き換えられます。使い方もとてもシンプルですし、そんな派手なプラグインではない分、色んなところで活躍してくれそうなプラグインかと思います。覚えておくと役立つ時が来るかもしれませんね!ということでダウンロードは以下のURLからどうぞ。0WordPressの囲み型ショートコードの基本的な使い方WordPressでプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記述してみる関連記事JavaScriptタッチ対応のドロワーコンポーネント「hy-drawer」hy-drawerはタッチに対応したドロワーコンポーネントです。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。