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

Question

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

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

например.

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

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

EDIT: Обратите внимание, что это вполне производительность критически и 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()); 

Demo using

EDIT

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

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

EDIT

Полотна спецификация не дает нам метод для измерения высоты строки, поэтому для этого мы можем использовать 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']);