gz-measure-text

Measure Text

Measure your text width and height in JavaScript

Getting Start

Install gz-measure-text

npm install gz-measure-text

Import measure text js:

import measure from "gz-measure-text";
 
const text = "This is a long text";

Measure

For default setting:

const { width, height } = measure(text);

With custom style:

const style = `
    font-size: 12px;
    font-family: Roboto, system-ui,PingFang SC,STHeiti,sans-serif;
    line-height: 20px;
`;
 
const { width, height } = measure(text, style);

For custom class name:

const { width, height } = measure(text, null, 'user-name-class');

For custom element tag name (default span):

const { width, height } = measure(text, null, null, "div");
console.log("Result: ", width, height);

maxWidth

High performance way to get max width of a set of texts

import { maxWidth } from "gz-measure-text";
 
const text = [
    "This is a long text",
    "todo something",
    "what",
    "hahahah",
];
 
const res = maxWidth(text);
console.log("maxWidth: ", res);