今回はjQueryで特定の行数以上になったらテキストをトリミングし、「続きを読む」をクリックしたら全文表示させる方法を紹介します。
文字数でトリミングする方法もありますが、これだと英語や日本語が入り混じる文ではトリミングする位置がバラつくので「行数でトリミングできたらいいなぁ」というのを実現してみます。
デモ
何はともあれまずはデモをどうぞ。
See the Pen
qBZvvmW by wagashi000327 (@wagashi000327)
on CodePen.
上のデモではテキストが3行以上の場合に非表示にしています。「続きを読む」をクリックすると全文が表示され、「続きを読む」は非表示になります。
また、指定した行数以上のテキストがない場合には「続きを読む」は自動で非表示になります。
jQueryで特定の行数以上で「続きを読む」を表示する方法
コードの解説をしていきます。
HTML
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="" class="more">続きを読む</a>テキスト<p>、続きを読むを<a>で用意しています。正直この辺は適当で構いません。
「続きを読む」も<a>である必要はありませんが、<a>にする場合はhref=""と指定しておいて下さい（href="#"みたいにはしない）。
CSS
.text {
line-height: 1.5;
}CSSはline-heightを指定しておいてください。要素に指定しなくても<body>などに指定されていればそれでも大丈夫です。
jQuery
やや長いですが、丁寧にみていけばそこまで難しい処理はしていません。
$(function () {
var $text = $('.text');//対象のテキスト
var $more = $('.more');//続きを読むボタン
var lineNum = 3;//表示する行数
var textHeight = $text.height();//テキスト全文の高さ
var lineHeight = parseFloat($text.css('line-height'));//line-height
var textNewHeight = lineHeight * lineNum;//指定した行数までのテキストの高さ
// テキストが表示制限の行数を超えたら発動
if (textHeight > textNewHeight) {
$text.css({
height: textNewHeight,
overflow: 'hidden',
});
//続きを読むボタンクリックで全文表示
$more.click(function () {
$(this).hide();
$text.css({
'height': textHeight,
'overflow': 'visible',
});
return false;//aタグ無効化
});
} else {
// 指定した行数以下のテキストなら続きを読むは表示しない
$more.hide();
}
});
まずは変数から見ていきます。
var $text = $('.text');//対象のテキスト
var $more = $('.more');//続きを読むボタン
var lineNum = 3;//表示する行数
var textHeight = $text.height();//テキスト全文の高さ
var lineHeight = parseFloat($text.css('line-height'));//line-height
var textNewHeight = lineHeight * lineNum;//指定した行数までのテキストの高さ
$text、$more、$lineNumの3つは自分で任意の要素と行数を指定してください。
textHeightはテキストが全文表示された場合のheightです。
lineHeightは文字通りテキストのline-hegihtです。ただ、そのまま取得するとpxまで含んでしまうので、parseFloat()を使って数値に変換しています。parseFloat()は文字列を小数点まで含めた数値に変換するjsの関数です。
textNewHeightは指定した行数までのテキストのheightです。例えばテキストを3行だけ表示させる場合、その3行分の要素のheightとなります。
// テキストが表示制限の行数を超えたら発動
if (textHeight > textNewHeight) {
$text.css({
height: textNewHeight,
overflow: 'hidden',
});
...
}テキストが全文表示された場合のheight（textHeight）が指定した行数までのheight（textNewHeight）より多かったら（＝指定した行数をオーバーしたら）処理をします。ここでテキストを非表示にする必要がある量かどうかを判定しています。
テキストを非表示にする方法は、テキストの要素にheightとoverflow: hiddenを指定することでheightをオーバーした分のテキストは非表示にするというものです。
//続きを読むボタンクリックで全文表示
$more.click(function () {
$(this).hide();
$text.css({
'height': textHeight,
'overflow': 'visible',
});
return false;//aタグ無効化
});
「続きを読む」をクリックしたら全文を表示します。
「続きを読む」は一度クリックしたらもう必要ないのでhide()で非表示にします。
また、テキストのheightをtextHeight（テキストが全文表示された場合のheight）に戻し、overflow: visibleにすることで全文を表示します。
また、「続きを読む」に<a>を使っている場合はreturn false;で無効化しておきます。<a>を使っていないならここは不要です。
} else {
// 指定した行数以下のテキストなら続きを読むは表示しない
$more.hide();
}そもそもテキスト自体が短く、指定した行数をオーバーしない場合もあるので、その場合は「続きを読む」は非表示にしておきましょう。
これで特定の行数以上のテキストを非表示にし、「続きを読む」をクリックで全文表示（テキストが短い場合は「続きを読む」を最初から非表示）にすることができました！
関数化してみた
サイトによっては複数箇所で使う場合もあると思うので、処理を関数にしてみました。
function trimByLines(text, more, lines) {
var $text = $(text);//対象のテキスト
var $more = $(more);//続きを読むボタン
var lineNum = lines;//表示する行数
var textHeight = $text.height();//テキスト全文の高さ
var lineHeight = parseFloat($text.css('line-height'));//line-height
var textNewHeight = lineHeight * lineNum;//指定した行数までのテキストの高さ
// テキストが表示制限の行数を超えたら発動
if (textHeight > textNewHeight) {
$text.css({
height: textNewHeight,
overflow: 'hidden',
});
//続きを読むボタンクリックで全文表示
$more.click(function () {
$(this).hide();
$text.css({
'height': textHeight,
'overflow': 'visible',
});
return false;//aタグ無効化
});
} else {
// 指定した行数以下のテキストなら続きを読むは表示しない
$more.hide();
}
};
trimByLines('.text', '.more', 3);
引数は3つ、順番に「テキスト要素」「もっと読む要素」「表示する行数」です。要素はCSSのセレクタと同じ書き方で指定できます。
色々なページで使う場合は処理をまとめてしまうとラクですね。
まとめ
指定した行数以上のテキストを「もっと読む」で全文表示するのは割とよく使う機能です。
jQueryで実現できるのでぜひ参考にしてください。
参考
以下の記事を参考にさせていただきました。ありがとうございますm(__)m
