Измерение ширины и высоты текста без визуализации

Есть ли способ получить оценку ширины текста без отображения фактических элементов? Что-то вроде холста TextMetrics?

Случай. Мне нужно оценить высоты элементов для ReactList. Для этого мне нужно было бы знать, сколько пространства потребуются текстовые элементы (или сколько строк они будут охватывать).

например.

render(){
    return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}

Если бы я знал, как широкий someText будет отображаться в одну строку и как долго будет линия, я мог бы легко найти достойную оценку для высоты компонентов.

EDIT: обратите внимание, что это довольно критичная производительность и DOM не следует трогать

Ответы

Ответ 1

Пожалуйста, проверьте это. это решение с использованием холста

function get_tex_width(txt, font) {
        this.element = document.createElement('canvas');
        this.context = this.element.getContext("2d");
        this.context.font = font;
        return this.context.measureText(txt).width;
    }
    alert('Calculated width ' + get_tex_width("Hello World", "30px Arial"));
    alert("Span text width "+$("span").width());

Демо с использованием

ИЗМЕНИТЬ

Решение с использованием холста не самое лучшее, каждый браузер имеет разный размер холста.

Здесь является хорошим решением для получения размера текста с использованием временного элемента. Демо

ИЗМЕНИТЬ

Спецификация canvas не дает нам метода для измерения высоты строки, поэтому для этого мы можем использовать parseInt(context.font). Чтобы получить ширину и высоту. Этот трюк работает только с размером пикселей.

function get_tex_size(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext("2d");
    this.context.font = font;
    var tsize = {'width':this.context.measureText(txt).width, 'height':parseInt(this.context.font)};
    return tsize;
}
var tsize = get_tex_size("Hello World", "30px Arial");

alert('Calculated width ' + tsize['width'] + '; Calculated height ' + tsize['height']);