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

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

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

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

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

出力側の言語(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で末尾の単位を除去)

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

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

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