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);