在不知道 React/JavaScript 字体的情况下计算文本的像素宽度

Question

我需要测量容器中单个单词（字符串）的像素长度。我正在缩小每个 div 的宽度，因此当文本换行时，它与容器完全平齐，因为有一个最大宽度导致它换行。此解决方案（及其用例）先前已在 Jquery 中对此答案进行了回答：

将 DIV 缩小为包装到其最大宽度的文本？

但是，上面的解决方案将每个单词放在一个跨度中，并使用 Jquery 的 .width() 方法来计算其物理大小。当我使用 React 时，我没有这个选项。

虽然我已经成功地使用 offsetWidth 方法来查找已呈现到 DOM 的项目的宽度，但我还没有找到其他可行的解决方案，这些解决方案不涉及将项目呈现到我可以用来查找宽度的 dom来自一个世界。

我在网上找到的一些解决方案提供了考虑字体因素的方法，但字体可能会改变，所以我需要一个更像 Jquery 的 .width() 的方法。

React/JavaScript（不是 Jquery）是否有任何方法可以确定单词的物理长度（以像素为单位），而无需将项目呈现到 dom 并且无需将字体类型放入函数中？

Answer 1

您可以使用measureText如下所示的画布：

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  return context.measureText(text).width;
}

如果您需要更改它，您可以只传递字体，它基本上是一个 CSS 字体声明。

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  return context.measureText(text).width;
}

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = font || getComputedStyle(document.body).font;

  console.log(context.font);

  return context.measureText(text).width;
}

const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

elements.forEach(element => {
  console.log(getTextWidth(element.innerText, getComputedStyle(element).font));
});

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
}

.serif {
  font-family: sans-serif;
}