如何获取span元素内文本自身的宽高而非span整体的宽高

这个问题我太熟悉了，你当前用getBoundingClientRect()拿到的是span容器的宽高，因为它被设置成了display: table-cell，会自动填充父div的空间，根本反映不出文本实际的尺寸。下面是一个实用的解决方案：

核心思路 #

创建一个隐藏的临时DOM元素，把目标文本和它的字体样式都复制进去，让这个临时元素完全贴合文本内容（不被容器拉伸），再获取它的尺寸，最后删掉临时元素就行。这样拿到的就是文本自身的真实宽高。

具体代码实现 #

// 获取目标文本元素和内容
var textNode = d3.select(".nodeText").node();
var actualText = textNode.textContent;

// 获取目标元素的字体相关样式（这些直接影响文本尺寸）
var computedStyles = window.getComputedStyle(textNode);
var fontProps = {
  fontStyle: computedStyles.fontStyle,
  fontWeight: computedStyles.fontWeight,
  fontSize: computedStyles.fontSize,
  fontFamily: computedStyles.fontFamily,
  lineHeight: computedStyles.lineHeight
};

// 创建临时元素
var tempSpan = document.createElement("span");
// 设置样式：隐藏（不影响页面布局）+ 贴合文本
tempSpan.style.position = "absolute";
tempSpan.style.left = "-9999px";
tempSpan.style.whiteSpace = "nowrap"; // 强制文本一行显示（如果需要换行可以去掉这行）
// 复制字体样式，保证尺寸计算准确
Object.assign(tempSpan.style, fontProps);
// 填入文本内容
tempSpan.textContent = actualText;

// 把临时元素加入文档（必须加入才能正确计算尺寸）
document.body.appendChild(tempSpan);

// 获取文本自身的宽高
var textBounds = tempSpan.getBoundingClientRect();
console.log("文本实际宽度:", textBounds.width);
console.log("文本实际高度:", textBounds.height);

// 移除临时元素，清理DOM
document.body.removeChild(tempSpan);

关键注意点 #

• 一定要复制字体相关样式：字体、字号、行高这些属性直接决定文本的尺寸，如果临时元素用默认样式，结果肯定不准。
• 如果你的文本是允许换行的，可以去掉whiteSpace: "nowrap"，这样临时元素的宽高就是文本自然换行后的实际尺寸。
• 临时元素必须添加到文档中才能正确计算尺寸，因为浏览器需要渲染它才能确定大小。

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