Css、jquery 指定幅に収まるようにテキストを省略・複数行対応2

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

前回の改良版。

目次

基本

「高さを指定」ではなく「行数を指定」。

前回のバージョンは1文字ずつ削除して高さ調査を繰り返していた。今回は「文字列を半分にして調査」を繰り返す(※処理速度向上のため)

ソース

「class:textOverflowLine」に対して処理する。

script側

jQuery(function($) {
	$('.textOverflowLine').each(function() {
		// 行数
		var row = 3;
		
		var $target = $(this);
		
		// オリジナルの文章を取得する
		var html = $target.html();
		
		var $clone = $target.clone();
		$clone
			.css({
				display: 'none',
				position : 'absolute',
				overflow : 'visible'
			})
			.width($target.width())
			.height('auto');
		
		$target.after($clone);
		
		// 必要な行数の高さを取得
		var $temp = $clone.clone();
		var _tempStr = "";
		for (var i=0; i<row; i++) {
			_tempStr += "あ<br>";
		}
		$temp.html(_tempStr);
		$target.after($temp);
		var targetHeight = $temp.height();
		$temp.remove();
		
		var fixStr = fixNumLineStr(html, targetHeight, $clone);
		$clone.html($('<span>' + fixStr + '</span>').html() + '...');
		$target.html($clone.html());
		
		// 文章を入れ替えて、複製した要素を削除する
		$clone.remove();
	});
	
	function fixNumLineStr(tmpStr, targetHeight, $clone) {
		var result = "";
		
		var i = 0;
		var survey = true;
		do {
			// 文字列を半分の長さにする
			var halfNum = Math.floor(tmpStr.length / 2);
			var halfStr = tmpStr.slice(0, halfNum);
			
			// 閉じタグの補完を考慮するためDOMに戻してから入れ直す
			$clone.html($('<span>' + result + halfStr + '</span>').html() + '...');
			
			if ($clone.height() <= targetHeight) {
				// 収まった場合
				result += halfStr;
				tmpStr = tmpStr.slice(halfNum);
				
				if (tmpStr.length <= 0) {
					survey = false;
				}
			}
			else {
				// 収まらなかった場合
				tmpStr = halfStr;
				if (tmpStr.length <= 1) {
					survey = false;
				}
			}
			
			if (50<i) {
				// 無限ループ対策
				survey = false;
			}
			i++;
		}
		while(survey);
		return result;
	}
});

英字・記号の羅列だと折返しの問題で希望通りには動作しないこともある。word-breakとか使えって話しもあるけどtableタグ絡みだと使えない感じなので、そういうときは、無理やり「width($target.width())」を「width("150px")」とかに指定するのもあり。

html側

<div class="textOverflowLine">○○○○○○</div>

css側

横幅を指定する。

.textOverflowLine {
	overflow: hidden;
	width: 400px;
}

※「overflow: hidden;」は必須。

関連項目