BLOG

複数行でも表示領域の合わせて文字列に「…」を付与する方法

2015/2/17

クライアントサイドで表示領域から文字列がはみ出す場合「…」をつける方法はcssのtext-overflowを使う方法があります。

text-overflowを有効にするにはwidthを指定し、overflowはvisible以外、white-spaceにnowrapを指定する必要があります。

下記サンプルCSSです。

.sample {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:200px;
}

.sample {

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

width:200px;

}

しかしこの方法だと複数行に対応していません。

そこでJavaScriptを使って文字を加工します。

$(function() {
	$('.sample').each(function() {
		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);
		while((html.length > 0) && (clone.height() > target.height())) {
			if(html.match(/<("[^"]*"|'[^']*'|[^'">])*>$/)){
				html = html.replace(/<("[^"]*"|'[^']*'|[^'">])*>$/, '');
			} else {
				html = html.substr(0, html.length - 1);
			}
			clone.html(html + '…');
		}
		target.html(clone.html());
		clone.remove();
	});
});

$(function() {

$('.sample').each(function() {

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);

while((html.length > 0) && (clone.height() > target.height())) {

if(html.match(/<("[^"]*"|'[^']*'|[^'">])*>$/)){

html = html.replace(/<("[^"]*"|'[^']*'|[^'">])*>$/, '');

} else {

html = html.substr(0, html.length - 1);

}

clone.html(html + '…');

}

target.html(clone.html());

clone.remove();

});

クライアントサイド特有のスクリプトになります。ちょっと不思議。。

対象の文字列を後ろから1文字ずつ削除していき、高さを判定しています。
htmlタグがある場合はいっきに削除し、閉じタグだけ削除してしまってもjQueryが自動的に補完します。
http://tech.kayac.com/archive/jquery-detail-tips.html

文字数が多いとけっこう重い処理になると思いますのでサーバサイドでの対応が必要です。

Tag:JavaScript

BLOG

BLOG

複数行でも表示領域の合わせて文字列に「…」を付与する方法

関連記事