１．実装したい機能

下図のように，コンテンツの幅に応じてその中の文字数を変化させたい．

幅が狭い時

幅が広い時

２．実装方法

実装

無理やりJavaScriptで実装した．

$(function() {
	// texts に表示すべきテキストが与えられている．
	SetTexts(texts);
	$(window).on('resize', function() {
		SetTexts(texts);
	})
});

function SetTexts(texts) {
	if (texts.length == 0) {
		return;
	}
	var pWidth = $('#contents .article div.right p.text').width();
	// 全角55文字 660px
	var letterPerPx = 55.0 / 660.0;
	var numOfLetter = Math.floor(pWidth * letterPerPx * 2) - 2;
	if (numOfLetter < 0) {
		numOfLetter = 0;
	}
	$('#contents .article div.right p.text').each(function(i) {
		$(this).text(texts[i].substr(0,numOfLetter) + "...");
	});
}

JavaScript (JQuery) のコード

問題点

この実装方法の問題点は，

	基準文字数を手動で与えているため，環境依存の影響を受ける．具体的には表示フォントが変化すると，２行に収まらなくなる可能性が否定できない．
	全角文字を基準としているため，半角文字が入ると文字幅が想定より小さくなる．

ことである．

３．JavaScriptで全角半角を区別し文字数をカウントする方法

に，全角文字を2，半角文字を1文字としてカウントするJavaScriptが紹介されている．

文字数をカウントする関数を下に抜粋する．

function strLength(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}

全角半角を区別して文字数をカウントするJavaScriptコード

文字列をエンコードし，%uがあるかで全角半角を判断してる．

 

とても良いアイデアに見えるが，escape()関数に問題がある．

などのリファレンスを見るとわかるのだが，escape()関数は現在非推奨であるのだ．

 

また，全角半角を区別して文字数をカウントできたとしても問題が残る．

それはプロポーショナルフォントである．

一般的な描画用の英字などの半角文字はほぼプロポーショナルフォントだ．

“l”と“m”では，文字幅がかなり違ってしまう．

 

結局は“文字数”ではなく，“文字幅”を取得する方法が必要となりそうである．

４．CSSで頑張る方法

にCSSのみで頑張る方法が記載されている．

しかし，text-overflowを使う方法は複数行に対応していないし，

-webkit-line-clampを使う方法はWebkit系列のブラウザにしか使えない．

 

ではどのブラウザにも使用できる方法として，beforeとafterの2つの擬似要素を使う方法を結論として提示しているが，今回のケースのように常に文字があふれるわけではない場合には使用できない．

５．結論

頭のいい人教えて！

というわけで，ナイスな方法を知っている人がいましたら，ぜひ教えて下さい．

６．出典サイト

	Webプログラマー＋WebデザイナーなZARU日記. 全角・半角を判別して文字数をカウントするJavaScript. Retrieved September 24, 2017, from http://blog.tofu-kun.org/070627210315.php
	MDN web docs. escape(). Retrieved September 24, 2017, from https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/escape
	NET BIZ DIV. TECH BLOG. 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ. Retrieved September 24, 2017, from https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/