[JQUERY] 자바 스크립트 / jQuery를에 문자열의 픽셀 길이를 결정?

자바 스크립트 / jQuery를에 문자열의 픽셀 길이를 결정?

해결법

1. ---

   1.스팬 및 사용 JQuery와 폭에서 텍스트 줄 바꿈 ()

   스팬 및 사용 JQuery와 폭에서 텍스트 줄 바꿈 ()

2. ---

   2.HTML 캔버스에 사용되는 컨텍스트는 내장 방법 폰트의 크기를 확인하기위한 있습니다. 이 방법은 텍스트의 폭을 포함하는 폭 속성이있는하는 TextMetrics 개체를 반환합니다.

   HTML 캔버스에 사용되는 컨텍스트는 내장 방법 폰트의 크기를 확인하기위한 있습니다. 이 방법은 텍스트의 폭을 포함하는 폭 속성이있는하는 TextMetrics 개체를 반환합니다.

   function getWidthOfText(txt, fontname, fontsize){
       if(getWidthOfText.c === undefined){
           getWidthOfText.c=document.createElement('canvas');
           getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
       }
       var fontspec = fontsize + ' ' + fontname;
       if(getWidthOfText.ctx.font !== fontspec)
           getWidthOfText.ctx.font = fontspec;
       return getWidthOfText.ctx.measureText(txt).width;
   }
   

   다른 사용자 중 일부는 제안으로 또는, 당신은 스팬 요소에 포장 할 수 있습니다 :

   function getWidthOfText(txt, fontname, fontsize){
       if(getWidthOfText.e === undefined){
           getWidthOfText.e = document.createElement('span');
           getWidthOfText.e.style.display = "none";
           document.body.appendChild(getWidthOfText.e);
       }
       if(getWidthOfText.e.style.fontSize !== fontsize)
           getWidthOfText.e.style.fontSize = fontsize;
       if(getWidthOfText.e.style.fontFamily !== fontname)
           getWidthOfText.e.style.fontFamily = fontname;
       getWidthOfText.e.innerText = txt;
       return getWidthOfText.e.offsetWidth;
   }
   

   편집 2020 : 이고르 Okorokov의 제안에서 추가 글꼴 이름 + 크기 캐싱.

3. ---

   3.난 그냥 문자열을 할 수 있다고 생각하지만, 올바른 특성 (크기, 글꼴 무게 등)과 함께 의 문자열 내부를 넣으면하지 않는다; 당신은 그 범위의 폭을 얻기 위해 jQuery를 사용할 수 있어야합니다.

   난 그냥 문자열을 할 수 있다고 생각하지만, 올바른 특성 (크기, 글꼴 무게 등)과 함께 의 문자열 내부를 넣으면하지 않는다; 당신은 그 범위의 폭을 얻기 위해 jQuery를 사용할 수 있어야합니다.

   <span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
   <script>
     $('#string_span').width();
   </script>
   

4. ---

   4.수직 동기화의 답변에 따라, 순수 자바 스크립트 방법은 객체의 많은 양의 번개가 빠릅니다. 여기 바이올린은 다음과 같습니다 https://jsfiddle.net/xeyq2d5r/8/

   수직 동기화의 답변에 따라, 순수 자바 스크립트 방법은 객체의 많은 양의 번개가 빠릅니다. 여기 바이올린은 다음과 같습니다 https://jsfiddle.net/xeyq2d5r/8/

   [1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"
   

   나는 HTML 캔버스 대 기본 자바 스크립트를 사용하여 제안 된 세번째 방법, 유리한 테스트를 받았다

   구글은 옵션 1과 3을 위해 매우 경쟁력이고, 2 폭격.

   파이어 폭스 48 : 방법 1은 938.895 밀리 초를했다. 방법 2 1536.355 밀리 초를했다. 방법 3 135.91499999999996 밀리 초를했다.

   에지 (11) 방법 1 4895.262839793865 밀리 초를했다. 방법 2 6746.622271896686 밀리 초를했다. 방법 3 1020.0315412885484 밀리 초를했다.

   구글 크롬 : 52 방법 1 336.4399999999998 밀리 초를했다. 방법 2 2271.71 밀리 초를했다. 방법 3 333.30499999999984 밀리 초를했다.

5. ---

   5.절대적으로-위치 DIV에 넣어 다음 태그의 표시 폭을 얻을 수 clientWidth를 사용합니다. 당신은 사업부를 숨기기 위해 "숨겨진"로 표시 여부를 설정할 수 있습니다 :

   절대적으로-위치 DIV에 넣어 다음 태그의 표시 폭을 얻을 수 clientWidth를 사용합니다. 당신은 사업부를 숨기기 위해 "숨겨진"로 표시 여부를 설정할 수 있습니다 :

   <div id="text" style="position:absolute;visibility:hidden" >This is some text</div>
   <input type="button" onclick="getWidth()" value="Go" />
   <script type="text/javascript" >
       function getWidth() {
           var width = document.getElementById("text").clientWidth;
           alert(" Width :"+  width);
       }
   </script>
   

6. ---

   6.먼저 위치를 복제하고 텍스트 스타일링하고 JQUERY 폭 () 함수를 사용한다. 이것은 측정이 정확 할 것이다. 예를 들어, 당신은의 선택과 CSS 스타일을 가지고 :

   먼저 위치를 복제하고 텍스트 스타일링하고 JQUERY 폭 () 함수를 사용한다. 이것은 측정이 정확 할 것이다. 예를 들어, 당신은의 선택과 CSS 스타일을 가지고 :

   .style-head span
   {
     //Some style set
   }
   

   이미이 스크립트 위에 포함 jQuery를 사용하여이 작업을 수행해야합니다 :

   var measuringSpan = document.createElement("span");
   measuringSpan.innerText = 'text to measure';
   measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/
   $('.style-head')[0].appendChild(measuringSpan);
   var theWidthYouWant = $(measuringSpan).width();
   

   말할 필요없이

   픽셀 길이를 개최한다. 그런 다음 작업을 완료 한 후 생성 된 요소를 제거하거나이 여러 번 수행하는 경우 여러 얻을 것이다. 아니면 대신에 참조하기 위해 ID를 추가합니다.

7. ---

   7.당신이 Snap.svg를 사용하는 경우, 다음 작동 :

   당신이 Snap.svg를 사용하는 경우, 다음 작동 :

   var tPaper = Snap(300, 300);
   var tLabelText = tPaper.text(100, 100, "label text");
   var tWidth = tLabelText.getBBox().width;  // the width of the text in pixels.
   tLabelText.attr({ x : 150 - (tWidth/2)});   // now it's centered in x
   

from https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery by cc-by-sa and MIT license