株式会社アリアのブログ

こんにちは、株式会社アリアです。

先日、自分が開発に携わっていた予約サイトのリニューアルリリースが行われました。

そのサイトにおいて、Webサイトで良く見かける「＜長い説明文の一部＞…続きを見る（リンク）」という表示に一工夫を凝らし、長方形の表示エリア内にテキストをピッタリと収めるようにしたので、その手法をご紹介いたします。なお、「続きを見る（リンク）」が不要な場合は css3 で実現可能なので、「ellipsis css」といったキーワードでネット検索していただければと思います。

ここで紹介する手法を実際に適用した表示は、この様になります。

では説明に入ります。まず最初は表示されるテキスト部分の Html です。

<p
 data-href="★1. 続きのリンク先URL★"
 data-max-height="★2. 許容する最大高さ。例：80★"
 class="ellipsis multiline"
 style="height:★3. p タグの高さ。例：80px★;"
>
★4. 表示したい文字列をここにセット★
</p>

この例では p タグを利用しています。★マークで囲んだ部分については、説明内容に従って記載（サーバーサイドから出力）しておいてください。p タグで囲まれている「4.」のテキスト文字列部分は、表示エリアをはみ出す文字数でサーバーサイドから出力しておく必要があります。

次に Html の JavaScript 部分ですが、ここでは jQuery を利用しています。Html のテキスト出力が終わった後に、クライアントサイドの JavaScript を呼び出すようにしておきます。

$(function() {
	$(".ellipsis").ellipsis();
}

最後に、上記から呼び出されるメイン JavaScript です。

(function($) {
	$.fn.ellipsis = function()
	{
		return this.each(function()
		{
			var el = $(this);

			if (el.css('overflow') == 'hidden')
			{
				var text       = el.html();
				var multiline  = el.hasClass('multiline');
				var max_height = el.data('maxHeight');
				var href       = el.data('href');

				var t = $(this.cloneNode(true))
					.hide()
					.css('position', 'absolute')
					.css('overflow', 'visible')
					.width(multiline  ? el.width() : 'auto')
					.height(multiline ? 'auto'     : el.height())
					;

				el.after(t);

				if (multiline)
				{
					// 下行の +4 はブラウザ差異吸収のために入れたものなので、必要に応じて調整してください。
					if (t.height() + 4 >= max_height)
					{
						el.height(max_height);
					}
				}

				function height() { return t.height() > max_height; };
				function width()  { return t.width()  > el.width(); };

				var func = multiline ? height : width;

				while (text.length > 0 && func())
				{
					text = text.substr(0, text.length - 1);

					if (typeof href === 'undefined')
					{
						t.html(text + '…');
					}
					else
					{
						t.html(text + '… <a href="' + href + '">続きを見る</a>');
					}
				}

				el.html(t.html());
				t.remove();
			}
		});
	};
})(jQuery);

メイン JavaScript の処理フローを説明すると以下のようになります。

① テキスト表示エリア（今回の例だと p タグ部分）から文字列が溢れるか否かをチェック
溢れる場合 ⇒ ②
溢れない場合 ⇒ ③
② テキストの後ろから一文字を削除 ⇒ ③
③ data-href が指定されている場合に「… 続きを見る（リンク）」を最後尾に追加 ⇒ ①

テキスト表示エリアから文字列が溢れないようになるまで上記フローが繰り返されます。したがって、クライアント側のブラウザに処理の負担を強いるため、一画面で十数ヶ所も使用すると表示が遅くなる事がありますが、一ヶ所ならば問題ないようです。ただし、サーバーサイドで出力する文字列が長すぎると、クライアントサイドで削除処理を行う回数が増えて表示に時間がかかりますので、サーバーサイドから出力する文字列の長さを調整する必要があります。

こういった表示の工夫を要求される機会はなかなか無いと思いますが、必要となった際の参考にしていただければ幸いです。

参考サイト：Stack Overflow