文字数を制限したい場合がある場合、いろんな関数を使えばできてしまいますが、jQueryでも文字数を制限して出力することができます。
HTMLの静的なページではあまり使うことはないと思いますが、WordPressのようなCMSでは結構使えます。
この記事は、そんな文jQueryのスニペットについて
- 文字を短縮させた場合の実装サンプル。
- jQueryのコピペ用コード一式。
- ざっくりとしたコードの解説。
の内容です。
指定の文字数に短縮してその末尾に文字を入れるスニペットについてご紹介します。
使う機会があったら是非使ってみてください。
目次
実装のサンプル
早速、実装のサンプルについてご覧ください。上から順に、文字を短縮していない状態と、jQueryて文字を短縮させた順に記載しています。
jQueryを適用していない状態のサンプル
まずは、jQueryを使わずそのまま表示させた場合です。一番長いもので105文字で、結構な長さになっています。
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキスト
jQueryで30文字に短縮させたサンプル
この記事のjQueryを使って、30文字以降の31文字目からが短縮されて「…」の表示になります。
また、30文字以下の場合はそのままの表示です。
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキスト
レンダリング時のちらつき対策もする為、表示をフェードインさせています。
コピペする時の注意点
この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><head>〜</head>jQueryは必須でないと動かないので、書きこんでからコピペください。
コピペ用コード一式
HTMLは表示させたいところに設置して、jQueryは <body>〜</body> のクロージングタグの前にコピペします。忘れずCSSもコピペしましょう。
コードを表示する
<ul class="dummytext">
<li>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</li>
<li>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</li>
<li>ダミーテキストダミーテキスト</li>
</ul>.dummytext {
display: none;
}$(function(){
$('.dummytext').fadeIn(500);
var $setElm = $('.dummytext li');
var cutFigure = '30'; // カットする文字数
var afterTxt = ' …'; // 文字カット後に表示するテキスト
$setElm.each(function(){
var textLength = $(this).text().length;
var textTrim = $(this).text().substr(0,(cutFigure))
if(cutFigure < textLength) {
$(this).html(textTrim + afterTxt).css({visibility:'visible'});
} else if(cutFigure >= textLength) {
$(this).css({visibility:'visible'});
}
});
});
</script>
<script>
$('.acc-btn').click(function(){
if ( $(this).next().is( ":hidden" ) ) {
$('.acc-content').slideUp('selected');
$(this).next().slideDown('selected');
} else {
$(this).next().slideUp('selected');
};
});各コードのざっくりとした解説
上記のコピペ用コードで実装が可能ですが、HTMLは <ul>〜</ul> タグの箇条書きのリストになっています。
その為、タグや設定を色々変えて使うことが多くなると思うので、ざっくりながら各コードについて解説します。
CSS：はじめは非表示にする display: none;
指定のclassにCSSで display:none を記述しておき、ページのレンダリング時に一瞬表示されてしまうのを防ぎます。
.dummytext {
display: none;
}このコードは、フェードインさせる為に必要なので、必ず記述しておきましょう。
jQuery：表示のちらつきを防ぐ .fadeIn
上記のCSS display:noneで該当部分を非表示にしておき、JavaScriptの読み込みでフェードインさせます。
$('.dummytext').fadeIn(500);数字の500はフェードインさせる速度で、すぐに表示させるなら0と記述します。
jQuery：短縮するルールを決める
以下の3行で、対象のclassと、文字数や短縮後に表示するルールを設定し、$('.dummytext li'); の中に対象にしたいclassやタグを記載しましょう。
var $setElm = $('.dummytext li');
var cutFigure = '30'; // それ以降短縮する文字数
var afterTxt = ' …'; // 短縮後に表示するテキストコピペ用コードは、30文字以上に「 …」をつけるて出力する形なので、この辺りもお好みで変更して利用ください。
