Определить длину пикселя строки в Javascript / jQuery?

контексты, используемые для HTML-холстов, имеют встроенный метод проверки размера шрифта. Этот метод возвращает значение TextMetrics объект, который имеет свойство width, которое содержит ширину текста.

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

или, как предложили некоторые другие пользователи, Вы можете обернуть его в span элемент:

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

тестирование:

• первое решение (холст) - проверен,работающего (возвращается в пикселей)
• второе решение (DOM) -проверен,работающего (возвращает в пикселях)

обратите внимание, что из-за различий в реализации эти два параметра могут возвращать несколько разные значения.

тест производительности: 26788 вызовов в среднем за 100 итераций. Протестировано на конце 2014 mac mini, 1.4 ГГц i5

Safari, версия 10.1.1 (12603.2.4):

• первое решение: 33.92 миллисекунды для 26788 призывы
• второе решение: 67.94 миллисекунды для 26788 вызовов

Google Chrome, версия 60.0.3112.90:

• первое решение: 99.1963 миллисекунды для 26788 вызовов
• второе решение: 307.4605 миллисекунд для 26788 вызовов

Я не верю, что вы можете сделать просто строку, но если вы поместите строку внутри <span> с правильными атрибутами (размер, вес шрифта и т. д.); Затем вы сможете использовать jQuery для получения ширины диапазона.

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

поместите его в абсолютно позиционированный div, а затем используйте clientWidth, чтобы получить отображаемую ширину тега. Вы даже можете установить видимость в "скрытый", чтобы скрыть div:

<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>

основываясь на ответе vSync, чистый метод javascript является молниеносным для большого количества объектов. Вот Скрипка:https://jsfiddle.net/xeyq2d5r/8/

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

Я получил благоприятные тесты для предложенного 3-го метода, который использует собственный javascript vs HTML Canvas

Google был довольно конкурентоспособным для варианта 1 и 3, 2 бомбили.

FireFox 48:
Метод 1 занял 938.895 миллисекунд.
Способ 2 занял 1536.355 миллисекунды.
Метод 3 занял 135,91499999999996 миллисекунд.

края 11 Метод 1 занял 4895.262839793865 миллисекунд.
Метод 2 занял 6746.622271896686 миллисекунд.
Метод 3 занял 1020.0315412885484 миллисекунды.

Google Chrome: 52
Метод 1 занял 336.4399999999998 миллисекунд.
Метод 2 занял 2271,71 миллисекунды.
Метод 3 занял 333,30499999999984 миллисекунды.

сначала реплицируйте расположение и стиль текста, а затем используйте функцию jQuery width (). это сделает измерения точными. Например, у вас есть стиль 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();

разумеется

theWidthYouWant

будет содержать длину пикселя. Затем удалите созданные элементы после вы сделали или вы получите несколько если это будет сделано несколько раз. Или вместо этого добавьте идентификатор для ссылки.

Если вы используете оснастку.СВГ следующие работы:

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