복붙노트

[JQUERY] 자바 스크립트 / 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
    
  8. from https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery by cc-by-sa and MIT license