获取单词间距宽度（以像素为单位）

Question

我卡在了如何找到单词之间一个空格的像素宽度上。例如，如果我有一个句子："The quick brown fox jumps over the lazy dog."，我想知道空格的像素宽度（所有空格的宽度将相同），是否有一个公式可以使用？这必须适用于许多不同的字体系列和大小。

我看到可以使用CSS word-spacing属性设置宽度，如下面的示例，但我不想“设置”它，我想“获取”该值。此外，我也不想修剪空格，只想计算空格的数量并加上它们的总宽度。

p { 
    word-spacing: 5px;
}

提前感谢！

- lnamba

---

你计划使用JavaScript吗？ - showdev

是的，抱歉忘了说...哎呀！ - lnamba

可能是使用JavaScript获取CSS值的重复问题。 - styfle

Answer 1

你可以使用JavaScript轻松地实现这一点，以返回具有id="id"的特定元素的单词间距值，如果它的单词间距样式已被指定：

document.getElementById("id").style.wordSpacing;

这是一个例子：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_wordspacing3。这个链接展示了如何使用JavaScript来控制文字间距。

- Nikita V

Answer 2

这种方法最终对我有用。基本上，我需要将整个元素变成画布，插入font-size/font-family属性值和我想要的文本（一个空格）。然后我就能使用measureText()来找到一个空格的宽度。 https://www.w3schools.com/tags/canvas_measuretext.asp

- lnamba

Answer 3

如果通过 CSS 设置了 word-spacing，则需要使用 window.getComputedStyle。

var ws = document.querySelector('#ws');
var p = document.querySelector('p');
var style = window.getComputedStyle(p);
ws.textContent = style.wordSpacing;

p {
  word-spacing: 5px;
}

<p>The quick brown fox jumped over the lazy dog</p>
<div>The word spacing above is: <b id="ws">0px</b></div>

- styfle

---

不错！其实我想看看能否在不设置“word-spacing”属性的情况下完成这个任务。 - lnamba

我不相信可以获取不存在的值。也许您可以更新您的问题并提供您的HTML、CSS和JS代码。 - styfle