div box 글자의 픽셀(px) 구하는 방법(calculating-text-width)

원리를 알면 간단합니다.

어떤것이든지 알고나면 간단핝데 알기전에는 정말 쉬원것도 모르면 답답한 법입니다.

보통 이미지나 div 박스등은 가로 세로의 픽셀을 구할 수 있습니다.

그런데 div 박스 안의 텍스트 글자의 전체 길이를 픽셀로 구하고 싶은 경우가 있는데요.

이런 경우 사용하는 방법입니다.

이는 가운데로 정렬 되어 있어도 크게 다르지 않습니다.

방법은 다음과 같습니다.

박스를 두개 사용하는데 안쪽의 박스에는 TEXT 글자가 들어가 있고 span으로 감싸고 밖을 div나 또는 다른것으로 감싸면 됩니다.

width = $(this).find('span:first').width();

그리고 밖의 박스에서 위치와 가로세로 높이를 구합니다.

안쪽의 span 에서도 같은 방식으로 구한 다음 위치를 빼주면 됩니다.

* 같이 참고 할 만 한것

https://stackoverflow.com/questions/895888/truncate-text-with-jquery-based-on-pixel-width

.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

function getDefaultFontSize(pa){
 pa= pa || document.body;
 var who= document.createElement('div');

 who.style.cssText='display:inline-block; padding:0; line-height:1; position:absolute; visibility:hidden; font-size:1em';

 who.appendChild(document.createTextNode('M'));
 pa.appendChild(who);
 var fs= [who.offsetWidth, who.offsetHeight];
 pa.removeChild(who);
 return fs;
}