Đo chiều rộng/chiều cao của văn bản mà không cần hiển thị

Question

Có cách nào để ước tính chiều rộng văn bản mà không hiển thị các phần tử thực tế không? Một cái gì đó như canvas TextMetrics?

Trường hợp: Tôi cần ước tính chiều cao của phần tử cho ReactList. Để làm điều đó tôi cần phải biết khoảng bao nhiêu không gian các yếu tố văn bản sẽ cần (hoặc bao nhiêu dòng họ sẽ span).

ví dụ:

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

Nếu tôi biết bao nhiêu someText sẽ được hiển thị thành một dòng và bao lâu dòng, tôi có thể dễ dàng đưa ra ước tính cho chiều cao thành phần.

EDIT: Lưu ý rằng đây là khá hiệu suất quan trọng và DOM không nên chạm vào

Answer 1

Vui lòng kiểm tra này. là một giải pháp sử dụng vải

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

Các giải pháp sử dụng vải không phải là tốt nhất, mỗi hợp đồng trình duyệt khác nhau kích thước vải.

Here là giải pháp tốt để lấy kích thước văn bản bằng phần tử tạm thời. Demo

EDIT

Các canvas spec không cung cấp cho chúng ta một phương pháp để đo chiều cao của một chuỗi, do đó cho điều này chúng ta có thể sử dụng parseInt(context.font). ĐỂ nhận chiều rộng và chiều cao. Thủ thuật này chỉ hoạt động với kích thước 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']);