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

Question

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

Answer 1

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

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

Может кому пригодится

      const getMaxPixelsOfStrings = ({ strings, styles = {} }) => {
  const spans = strings.map(str => {
    const span = document.createElement('span')
    span.append(str)
    Object.assign(span.style, {
      position: 'absolute',
      ...styles,
    })

    return span
  })

  document.querySelector('html').prepend(...spans)
  const maxPixels = Math.max(...spans.map(span => span.getBoundingClientRect().width))

  spans.forEach(span => span.remove())

  return maxPixels
}

Применение

      getMaxPixelsOfStrings({
            strings: ['One', 'Two', 'Three', 'Four', 'Five'],
            styles: {
              fontSize: '18px',
              letterSpacing: '1px',
            },
          })

Answer 8

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