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

Question

Есть ли способ определить длину строки в jQuery / JavaScript?

Answer 1

Обернуть текст в span и использовать jquery width ()

Answer 2

Контексты, используемые для холстов 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 вызовов

Answer 3

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

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

Answer 4

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

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

Я получил благоприятные тесты для 3-го предложенного метода, который использует нативный JavaScript и 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 миллисекунды.

Answer 5

Поместите его в абсолютно позиционированный 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>

Answer 6

Сначала скопируйте расположение и стиль текста, а затем используйте функцию 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

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

Answer 7

Если вы используете 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