Получить ширину межсловного интервала в пикселях

Question

Я застрял на том, как найти ширину в пикселях одного пробела между словами. Например, если у меня есть предложение: "The quick brown fox jumps over the lazy dog." и я хочу, чтобы ширина в пикселях пробелов (которые все будут одинаковыми), есть ли формула, которую я мог бы использовать? Это должно быть применимо для разных семейств шрифтов и размеров.

Я видел, что могу установить ширину, используя CSS-пространство слов, как в примере ниже, но я не хочу его устанавливать, я хочу получить значение. Кроме того, я также не хочу обрезать пробелы, просто рассчитать количество пробелов и добавить их общую ширину.

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

Вам нужно использовать 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>