在不渲染的情况下测量文本宽度/高度

Posted 2023-02-22

【中文标题】在不渲染的情况下测量文本宽度/高度

【英文标题】：Measuring text width/height without rendering

【发布时间】：2015-09-27 02:17:50

【问题描述】：

有什么方法可以在不渲染实际元素的情况下估算文本宽度？像画布 TextMetrics 之类的东西？

案例：我需要估计 ReactList 的元素高度。为此，我需要大致了解文本元素需要多少空间（或者它们将跨越多少行）。

例如。

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

如果我知道 someText 将被渲染成一行的宽度以及该行的长度，我可以很容易地对组件的高度做出一个合适的估计。

编辑：请注意，这对性能非常关键，不应触及 DOM

【问题讨论】：

您对 html 版本有什么限制吗？

不，假设是现代浏览器。

【参考方案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

编辑

使用画布的解决方案不是最好的，每个浏览器处理不同的画布大小。

Here 是使用临时元素获取文本大小的一个很好的解决方案。 Demo

编辑

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

【讨论】：

会因em 而失败，但不知道为什么，因为它确实适用于% 和视口单元。还要小心，在这种情况下this 是window 对象，所以你实际上是在创建全局变量element 和context。

@Kaiido 谢谢你的评论。是的，画布处理不同的 % 和 em 大小。所以这仅适用于 px 尺寸。因此，在 DOM 中获取宽度的唯一方法是创建临时元素，将其添加到 DOM，应用样式和获取大小。

实际上没有它确实适用于% 和视口单位（vh、vw...） 但它不适用于em，这很奇怪跨度>

但主要问题仍然是你确实在玩全局

由于性能要求，临时元素无法真正发挥作用。画布的东西是我的首选atm。我想用 position:fixed 和 x-index:-1000 制作一些零大小的画布，然后重用 measureText 的上下文。