ど素人から毛を生やす。<延>

[JQuery]指定の列数を超過したら末尾「…」で後略する表示

Web > javascript 2022年10月28日(最終更新:1年前)

2022年10月28日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
一覧を表示するとき、長い文章は冒頭だけ出力し、後ろを省略したい事例はままあります。

単純に表示制限をかけたい場合、縦横幅を明記した上で orverflow:hidden してしまえば楽勝です。
が、文章がブツ切りになるので末尾「…」に置き換えたい場合があるでしょう。

昨今だと text-overflow:ellipsis というCSSを指定する手段もあります。
漸くIEを投げ捨てられるようになったのですから、これで対応するのが安牌でしょう。

ベンダープレフィックス不使用(1行のみ){
	width:指定が必要;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}
複数行対応(当例では3行){
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}

とはいえ、そういったモダンなCSSが使用できなかったり、応用を利かせたかったりする場面も、往々にして存在します。

となると、出力側の言語(PHPとか)で文字数制限すれば末尾「…」にすることは簡単ですが、半角文字が入り混じると、綺麗に省略位置を揃えられません。
プロポーショナルフォントを使用している場合は尚のこと。

ということで、JQueryで指定の縦幅を超過したら末尾の文字を変更して後略する方法です。

$(document).ready(function(){
	$(要素).map(function(){
		let line = 制限したい高さ
		if(!(isNaN(line) || line==0) && line < $(this).innerHeight()){
			while(line < $(this).innerHeight()){
				$(this).text( $(this).text().slice(0, -2) + '…' );
			}
		}
	});
})

原理は要素の高さが目標に収まるまで、「2文字削って「…」を足す」を繰り返しているだけ。
元から範囲内に収まっている場合、末尾に「…」を出力することもありません。
もしも省略用の文字を「..」とかにしたい場合は slice(0, -3) にして「3字削って2字足す」にしてしまえばおk。

lineの算出については、

let lineHeight = window.getComputedStyle(this, null).getPropertyValue('line-height');
let line = lineHeight.slice(0, -2) * [行数]

こうすることで、行数指定にもできます。(lineHeightはpxまで取得するので、sliceで末尾の単位を除去)
ただし、CSSでline-heightが無指定だとlineHeightが[normal]という文字列で取れてしまい、NaNになるので省略が実行されません。この場合は要素にline-heightを指定します(em指定でおk)。

$(document).ready(function(){
$(window).on('load',function(){

どちらの読込タイミングを設定しても、挙動に変化はありませんでした。
ただし、tdタグに組み込んだりすると、他のセルの高さに引っ張られて無限ループになる危険性があるので、必ずその要素単体を囲むよう注意します。


また、jQueryで処理する利点は応用が利くと先述したので、応用編として「親要素の高さを超過する分をカット」に変更する処理を紹介しておきます。

$(要素).map(function(){
	let parent = $(this).closest(親要素);
	if(parent.innerHeight() < parent.get(0).scrollHeight){
		while(parent.innerHeight() < parent.get(0).scrollHeight){
			let tmp = $(this).html().slice(0, -2);
			if(tmp.endsWith('<br>')){
				tmp = tmp.slice(0, -4);
			}
			$(this).html( tmp + '…' );
		}
	}
});

親要素のoverflowがhiddenの場合、innerHeightよりscrollHeightが上回っていれば、その要素にははみ出ている要素があるので、超過しなくなるまでカットできます。

また、<br>タグを許容する場合は、末尾に改行タグが入った場合に $(this).text($(this).text().slice(0, -2)+'…'); ではinnerHeightの取得結果が予定外の値になり「…」の表示が狂うため、末尾の改行タグは別途取り除くようにします。
このとき tmp.endsWith('<br>') を使えばスマートではあるのですが、どうにもモダンではない条件で効かないことがあったので、その場合は tmp.slice(-4)=='<br>' に変更します。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)