[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。
ダウンロードはこちら デモ

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jtruncate.js" type="text/javascript"></script>

実装

対象の要素にidもしくはclassを指定して、オプションを設定します。

<div id="div627">折りたたみする文章</div>

<script type="text/javascript">
$().ready(function() {
    $('#div627').jTruncate({
        length: 200,            // 表示する文字数
        minTrail: 0,            // 省略文字の最低文字数
        moreText: "more",       // 省略部分を表示するリンクの文字
        lessText: "hide",       // 省略部分を非表示にするリンクの文字
        ellipsisText: "...",    // 省略部分をあらわす文字
        moreAni: "fast",        // 折り広げるスピード
        lessAni: "fast"         // 折り畳むスピード
    });  
});
</script>

「折り畳む」の反意語って何なんでしょうね~。

オプション

  • length:表示文字数 (デフォルト)300
  • minTrail:省略文字の最低文字数(省略対象の文字数がこれ以下だったら省略はしませんという数字) (デフォルト)20
  • moreText:「さらに」を表すテキスト (デフォルト)"more"
  • lessText:「閉じる」を表すテキスト (デフォルト)"less"
  • ellipsisText:省略部分を表すテキスト (デフォルト)"..."
  • moreAni:開くスピード (デフォルト)なし
    jQueryのEffects/show()のspeedの設定 "slow"/"fast"もしくは秒数[ミリ秒]
  • lessAni:閉じるスピード (デフォルト)なし
    jQueryのEffects/hide()のspeedの設定 "slow"/"fast"もしくは秒数[ミリ秒]

日本語では

日本語で必要に迫られたのでためしたところダメ。。と、検索してみたら対処してらっしゃるかたがいました。
jTruncSubstr
プラグインを読み込んで、
$('#div').jTruncate を$('#div').jTruncSubstrに置き換えるだけでよさそうです。
ありがとうございます。

Readmore.js 高さ指定
  • このエントリーをはてなブックマークに追加

関連記事

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑