无需渲染即可测量文本宽度/高度

Question

有没有办法在不渲染实际元素的情况下估算文本宽度？像canvas TextMetrics这样的东西？

案例:我需要估算ReactList的元素高度.要做到这一点,我需要大致知道文本元素需要多少空间(或者它们将跨越多少行).

例如.

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

如果我知道someText会被渲染到一条线上有多宽以及线条的长度,我可以很容易地得出一个合适的元件高度估计值.

编辑:请注意,这是非常重要的性能,不应该触及DOM

Answer 1

请检查一下.是使用canvas的解决方案

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).获得宽度和高度.此技巧仅适用于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']);