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

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

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

目次

基本

1行だけならCSS(text-overflow: ellipsis;)で対応可能。複数行となると対応できないのでjqueryを使って対応させる。

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

考え方

オリジナルの文章をコピーして最後の文字を削除し高さを調べる

流れとしては下記のような感じ。

  1. オリジナル文章をCSSごとコピーし「絶対配置+非表示」で複製しておく。
  2. 「1」を複製し、中の文章を指定された行数分用意・高さを保存しておく。
  3. 「1」から最後の文字を削除
  4. 「3」に「...」を追加し、幅を取得。
  5. 指定幅を超えるなら「3」に戻る、超えないなら「5」にすすむ
  6. オリジナルの文章を「4」に置き換え

ソース

「class:textOverflowLine」に対して処理する。文字が多すぎる場合は時間がかかるので、適当に別処理をかましておいた方が良さげ。

サンプル
jqueryとCSSで指定幅に収まるように文字数を減らす・複数行対応
背景色は見やすくするためにいれているだけ。paddingとか指定するなら親に別のdivとか追加した方が良いと思われる

script側

jQuery(function($) {
	$('.textOverflowLine').each(function() {
		// 行数
		var row = 2;
		
		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();
		
		// 指定した高さになるまで、1文字ずつ消去していく
		while((html.length > 0) && ($clone.height() > targetHeight)) {
			html = html.substr(0, html.length - 1);
			
			// 閉じタグの保管を考慮するためDOMに戻してから入れ直す
			$clone.html($('<span>' + html + '</span>').html() + '...');
		}
		
		// 文章を入れ替えて
		$target.html($clone.html());
		
		//複製した要素を削除する
		$clone.remove();
	});
});

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

html側

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

css側

横幅を指定する。

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

※「overflow: hidden;」は必須。

関連項目