Рассчитать ширину текста с помощью JavaScript

Question

Я бы хотел использовать JavaScript для вычисления ширины строки. Возможно ли это без использования моноширинной гарнитуры?

Если он не встроенный, моя единственная идея - создать таблицу ширины для каждого символа, но это довольно неразумно, особенно с поддержкой Unicode и разных размеров шрифта (и всех браузеров в этом отношении) .

Answer 1

Я сделал крошечный модуль ES6 (использует jQuery):

import $ from 'jquery';

const $span=$('<span>');
$span.css({
    position: 'absolute',
    display: 'none'
}).appendTo('body');

export default function(str, css){
    $span[0].style = ''; // resetting the styles being previously set
    $span.text(str).css(css || {});
    return $span.innerWidth();
}

Простота в использовании:

import stringWidth from './string_width';
const w = stringWidth('1-3', {fontSize: 12, padding: 5});

Замечательная вещь, которую вы можете заметить - она ​​позволяет учитывать любые атрибуты CSS, даже отступы!

Answer 2

var textWidth = (function (el) {
    el.style.position = 'absolute';
    el.style.top = '-1000px';
    document.body.appendChild(el);

    return function (text) {
        el.innerHTML = text;
        return el.clientWidth;
    };
})(document.createElement('div'));