https://github.com/georgezouq/measure-text

Measure your text width and height with custom style and class name in browser
https://github.com/georgezouq/measure-text

javascript measure toolkit tools

Last synced: 4 days ago
JSON representation

Measure your text width and height with custom style and class name in browser

• Host: GitHub
• URL: https://github.com/georgezouq/measure-text
• Owner: georgezouq
• Created: 2020-10-26T02:19:23.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-27T01:38:52.000Z (about 4 years ago)
• Last Synced: 2024-11-07T02:06:25.359Z (8 days ago)
• Topics: javascript, measure, toolkit, tools
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gz-measure-text
• Size: 6.84 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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:

```javascript

import measure from "gz-measure-text";

const text = "This is a long text";

```

### Measure

For default setting:

```javascript

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

```

With custom style:

```javascript

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:

```javascript

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

```

For custom element tag name (default `span`):

```javascript

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

```javascript

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

```