How can you measure the space that a text will take in Javascript?

Question

In Javascript, I have a certain string, and I would like to somehow measure how much space (in pixels) it will take within a certain element.

Basically what I have i

Answer 1

Given this HTML text here you have to read the offsetWidth attribute of the span, which is only assigned when the element itself is added to the DOM without a style that makes it invisible. Technically what this means is that the browser has to be able to visually load the element in the DOM to be able to construct and assign the offsetWidth attribute.

Something like this would work:

var span = document.createElement("span");
span.appendChild(document.createTextNode("text here"));

span.style = ""; // to make sure the elment doesn't have "display: none" or such
document.body.appendChild(span); // adding it to the DOM

var textWidth = span.offsetWidth;

// be sure to hide or remove the span if you don't need it anymore