Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
break-styled-lines
Advanced tools
This package is useful for when you want to know where linebreaks will occur in text given a font style (e.g. 16pt italic Georgia
) and the width of its container.
This utility also supports some more complex use-cases:
Uses the Canvas API to measure text, so it's quite fast. Uses an OffscreenCanvas if the browser supports it.
Comes with typescript types.
import breakLines from "break-styled-lines";
const textWithLineBreaks = breakLines(
"Good day to you my friends! What ails you on this day?",
100,
"bold 12pt arial"
);
The result of the above usage would be:
/*
Good day to
you my
friends!
What ails
you on this
day?
*/
yarn add break-styled-lines
The single breakLines
export supports three different cases:
breakLines(
// The text you'd like to insert newlines into
text: string
// The width constraining the text
width: number
// The font style of the text (a value of the CSS font property e.g. 10px bold serif)
style: string
): string | string[]
breakLines("Good morrow my good man!", 100, "16pt serif");
breakLines(
// An array of strings, which will be treated as a single run of text, and then split back apart again before being returned.
text: string[]
// The width constraining the text
width: number
// The font style of the text (a value of the CSS font property e.g. 10px bold serif)
style: string
): string | string[]
breakLines(["Good morrow my good man!", " What brings you to our corner of the world?"], 100, "16pt serif")
```ts
### Text descriptors
```ts
breakLines(
// An array of descriptors, which will be treated as a single run of text, and then split back apart again before being returned.
// { text: string, font?: string }
text: TextDescriptor[]
// The width constraining the text
width: number
// The default font style of the text which will be used if the descriptor is not provided one (a value of the CSS font property e.g. 10px bold serif)
style: string
): string | string[]
breakLines(
[
{ text: "Good morrow my good man!" },
{ text: " What brings you to our corner of the world?" },
{
text: " Our selection of the finest smoked cheeses, you say?!",
font: "36pt bold Impact",
},
],
100,
"16pt serif"
);
FAQs
Add newlines to a string of text given a font style and width
The npm package break-styled-lines receives a total of 1,451 weekly downloads. As such, break-styled-lines popularity was classified as popular.
We found that break-styled-lines demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.