gz-measure-text
v0.0.7
Published
Measure your text width and height with custom style and class name in browser
Downloads
15
Readme
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);