jQueryを使って画面上の文字列の幅を取得するサンプル

■画面上で文字列の幅を調べる

jQueryを利用して対象の文字列が画面上で何ピクセルあるのか、というのを取得するサンプルです。画面上での文字の幅を取得することで、折り返しが発生しないようにフォントサイズに自動調整したり、ということが可能になります。

以下、サンプルコードです。

<!DOCTYPE html>
<html lang="ja">
	<head>
	    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
	    <script>
	    	$(document).ready(function(){
	    		string = 'ほげほげほげほげほげー';

	    		// ここでstringに入っている文字列の幅のピクセル数を取得することができる。
	    		widthPixel = strWidth(string);
	    		alert(widthPixel);

	    		// 以下のようにフォントサイズを設定することで、フォントの大きさを変更した後の
	    		//　幅を取得することもできる
	    		$('#widthcheck').css('font-size', '10px');
			 	$('#widthcheck').css('visibility',　'hidden');
			 	$('#widthcheck').css('position',  'absolute');
			 	$('#widthcheck').css('white-space', 'nowrap');
			 	widthPixel = strWidth(string);

			 	alert(widthPixel);
	    	});

	    	function strWidth(str) {
			  var e = $("#widthcheck");
			  var width = e.text(str).get(0).offsetWidth;
			  e.empty();
			  return width;
			}
	    </script>
	</head>

	<body>
		<span id="widthcheck" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
	</body>
</html>

こんな感じで取得することができます。CSSが適用されている場合は、CSSが適用された後の幅が取得できます。
使ってみてください。では。