JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<span class="my_class">Hello World</span>

CSS

.my_class{
    font:30px Arial;
    white-space: nowrap;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />');
function get_tex_width(txt, font) {
        this.element = document.createElement('canvas');
        this.context = this.element.getContext("2d");
        this.context.font = font;
        return this.context.measureText(txt).width;
    }
    alert('Calculated width ' + get_tex_width("Hello World", "30px Arial"));
    alert("Span text width "+$(".my_class").width());