JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<div id="content"></div>
<div id="calculated"></div>
<div id="rendered"></div>
<br />
<span class="my_class">Hello World</span>

CSS

.my_class{
    font:30em Arial;
    white-space: nowrap;
}
.textDimensionCalculation {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

JavaScript

var calculateWordDimensions = function(text, classes, escape) {
    classes = classes || [];

    if (escape === undefined) {
        escape = true;
    }

    classes.push('textDimensionCalculation');

    var div = document.createElement('div');
    div.setAttribute('class', classes.join(' '));

    if (escape) {
        $(div).text(text);
    } else {
        div.innerHTML = text;
    }

    document.body.appendChild(div);

    var dimensions = {
        width : jQuery(div).outerWidth(),
        height : jQuery(div).outerHeight()
    };

    div.parentNode.removeChild(div);

    return dimensions;
};

var dimensions = calculateWordDimensions('Hello World',['my_class']);

$("#calculated").html('Calculated width ' + dimensions.width);

$("#rendered").html("Span text width "+$("span").width());