Измерение ширины / высоты текста без рендеринга

Question

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

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

например.

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

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

РЕДАКТИРОВАТЬ: Обратите внимание, что это весьма критично для производительности, и DOM не следует трогать

Answer 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 не является лучшим, каждый браузер имеет разный размер холста.

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

РЕДАКТИРОВАТЬ

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

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']);