如何获取display:table容器内文本自身宽高而非display:table-cell的span宽高

要拿到这个span里文本的真实尺寸，而不是被table布局撑开的span元素尺寸，最靠谱的方法是创建一个不受布局影响的临时元素，复刻原文本的渲染样式，再通过它来获取尺寸。具体操作思路如下：

• 先创建一个临时元素，把原span里的文本内容复制进去，同时照搬所有影响文本渲染的样式（字体、字号、行高这些一个都不能少），确保临时元素的文本和原文本渲染效果完全一致。
• 把临时元素放到DOM里，但设置样式让它不影响页面布局（比如绝对定位到视野外，或者设visibility:hidden），不能用display:none——不然浏览器不会渲染它，拿不到准确尺寸。
• 获取临时元素的宽高，这就是文本的实际尺寸了，用完记得把临时元素删掉，避免污染DOM。

直接上可复用的代码示例：

// 找到目标span元素
const targetSpan = document.querySelector('.nodeText');
// 创建临时span用来计算文本尺寸
const tempTextEl = document.createElement('span');

// 复制原元素的所有字体相关样式，保证渲染一致
const originStyle = window.getComputedStyle(targetSpan);
tempTextEl.style.fontFamily = originStyle.fontFamily;
tempTextEl.style.fontSize = originStyle.fontSize;
tempTextEl.style.fontStyle = originStyle.fontStyle;
tempTextEl.style.fontWeight = originStyle.fontWeight;
tempTextEl.style.lineHeight = originStyle.lineHeight;
tempTextEl.style.whiteSpace = 'nowrap'; // 禁止换行，和原table-cell内文本行为一致

// 设置临时元素样式，让它不干扰页面布局
tempTextEl.style.position = 'absolute';
tempTextEl.style.left = '-9999px';
tempTextEl.style.visibility = 'hidden';

// 复制文本内容
tempTextEl.textContent = targetSpan.textContent;

// 把临时元素添加到DOM中（必须在DOM里才能计算准确尺寸）
document.body.appendChild(tempTextEl);

// 获取文本的实际宽高
const actualTextWidth = tempTextEl.offsetWidth;
const actualTextHeight = tempTextEl.offsetHeight;
// 或者用getBoundingClientRect，精度更高
const textRect = tempTextEl.getBoundingClientRect();
const actualWidth = textRect.width;
const actualHeight = textRect.height;

// 用完记得移除临时元素，清理DOM
document.body.removeChild(tempTextEl);

// 打印结果看看
console.log(`文本实际宽度：${actualTextWidth}px`);
console.log(`文本实际高度：${actualTextHeight}px`);

为什么这个方法管用？因为你的span是display:table-cell，它的宽度会被父级display:table的50px限制，直接拿span的offsetWidth得到的是50px，而不是文本实际的45px。临时元素脱离了table布局，它的宽高完全由内部文本内容决定，所以能准确反映文本的真实尺寸。

需要注意的是，一定要复制所有影响文本渲染的样式，比如行高（line-height）如果不一样，高度计算就会出错；white-space设为nowrap是因为原table-cell里的文本默认不会换行，临时元素也要保持这个行为，否则文本换行的话宽度就不对了。

内容的提问来源于stack exchange，提问作者ozil