在不知道React/JavaScript字体的情况下计算文本的像素宽度 [英] Calculate pixel width of text without knowing font in React/JavaScript

问题描述

我需要测量容器中单个单词(字符串)的像素长度.我正在缩小每个div的宽度，以便在文本换行时，它与容器完全齐平，因为有一个最大宽度导致它换行.此解决方案(及其用例)先前已在Jquery中针对以下答案得到了回答:

I need to measure the pixel length of individual words (strings) in a container. I am shrinking each div's width so when the text wraps it is perfectly flush against its container, as there is a max-width that causes it to wrap. This solution (and its use case) have previously been answered in Jquery on this answer:

将DIV缩小为包裹成最大宽度?

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

However, the above solution places each word in a span and uses Jquery's .width() method to calculate its physical size. As I am using React, I do not have this option.

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

While I have been successful in using the offsetWidth method to find the width of an item that has been rendered to the DOM, I have not found other viable solutions that don't involve rendering the item to the dom I can use to find the width of a single world.

我在网上找到了一些解决方案，这些方法提供了影响字体的方法，但是字体可能会发生变化，因此我需要一种更类似于Jquery的.width()的方法.

Some solutions I have found online provide methods that factor in the font, but the font could change, so I need a method more like Jquery's .width().

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

Does React/JavaScript (not Jquery) have any means of determining the physical length of a word in pixels without having to render the item to the dom and without putting the font type into a function?

推荐答案

您可以使用 measureText 如下:

You can use measureText of canvas like below:

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字体声明.

You can just pass the font if you need to change it, it's basically a CSS font declaration.

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>

这篇关于在不知道React/JavaScript字体的情况下计算文本的像素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！