3

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

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

p { 
    word-spacing: 5px;
}

提前致谢！

4

3 回答 3

2

您可以简单地使用 javascript 来执行此操作，以返回具有 id="id" 的特定元素的字间距值，如果指定了其字间距样式：

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

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

于 2017-09-08T01:23:43.807 回答
1

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

于 2017-09-08T21:29:09.603 回答
0

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

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>

于 2017-09-08T01:35:15.460 回答