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

Ответ 1

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

Ответ 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;
}

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

• Первое решение (canvas) - проверено, работает (возвращается в пикселях)
• Второе решение (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 вызовов

Ответ 3

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

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

Ответ 4

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

Ответ 5

Основываясь на ответе 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 миллисекунд.

Ответ 6

Сначала реплицируйте расположение и стиль текста, а затем используйте функцию Jquery width(). Это сделает измерения точными. Например, у вас есть css-стиль с селектором:

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

Вам нужно будет сделать это с помощью JQuery, уже включенного выше этого script:

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

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

Ответ 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 centered in x