Question

我坚持如何找到单词之间一个空格的像素宽度。例如，如果我有一个句子："The quick brown fox jumps over the lazy dog."并且我想要空格的宽度（这些都是相同的），那么我可以使用一个公式吗？这必须可用于许多不同的字体系列和大小。

我看到我可以使用CSS字间距属性设置宽度，如下面的示例，但我不想设置它，我想获取< / em>值。此外，我也不想修剪空白，只需计算空格量并添加它们的总宽度。

p { word-spacing: 5px; }

提前致谢！

Answer 1

如果指定了单词间距样式，您可以使用javascript简单地返回id =“id”的特定元素的字间距值：

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

以下是一个示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_wordspacing3

Answer 2

这种方法最终为我工作。基本上，我需要将整个元素放到画布中，插入font-size / font-family属性值和我想要的文本（空格）。然后我可以使用measureText()来查找空间的宽度。 https://www.w3schools.com/tags/canvas_measuretext.asp

Answer 3

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

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>

以像素为单位获取字间距宽度

3 个答案: