我需要测量容器中单个单词(字符串)的像素长度。我正在缩小每个 div 的宽度,因此当文本换行时,它与容器完全齐平,因为有一个最大宽度导致它换行。此解决方案(及其用例)先前已在 Jquery 中对此答案进行了回答:
Shrink DIV to text that's wrapped to its max-width?
但是,上面的解决方案将每个单词放在一个跨度中,并使用 Jquery 的 .width() 方法来计算其物理大小。当我使用 React 时,我没有这个选项。
虽然我已经成功地使用 offsetWidth 方法来查找已呈现到 DOM 的元素的宽度,但我还没有找到其他可行的解决方案,这些解决方案不涉及将元素呈现到我可以用来查找宽度的 dom来自一个世界。
我在网上找到的一些解决方案提供了考虑字体因素的方法,但字体可能会改变,所以我需要一个更像 Jquery 的 .width() 的方法。
React/JavaScript(不是 Jquery)是否有任何方法可以确定单词的物理长度(以像素为单位),而无需将元素呈现到 dom 并且无需将字体类型放入函数中?
最佳答案
您可以使用 Canvas 的 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>
关于javascript - 在不知道 React/JavaScript 字体的情况下计算文本的像素宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58704990/