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

Question

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

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

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

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

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

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

标签： javascripthtmlcssreactjs

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;

  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;
}

<h1>Hello, World</h1>
<h2>Hello, World</h2>
<h3>Hello, World</h3>
<h4>Hello, World</h4>
<h5>Hello, World</h5>
<h6>Hello, World</h6>
<h1 class="serif">Hello, World</h1>
<h2 class="serif">Hello, World</h2>
<h3 class="serif">Hello, World</h3>
<h4 class="serif">Hello, World</h4>
<h5 class="serif">Hello, World</h5>
<h6 class="serif">Hello, World</h6>