![Meet Socket at BlackHat and DEF CON in Las Vegas](https://cdn.sanity.io/images/cgdhsj6q/production/4a3876139ffd3878bb3e7800a14cf4044245dca7-1080x834.jpg?w=400&fit=max&auto=format)
Security News
Meet Socket at BlackHat and DEF CON in Las Vegas
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
break-styled-lines
Advanced tools
Readme
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
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
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
Security News
Learn how Socket's 'Non-Existent Author' alert helps safeguard your dependencies by identifying npm packages published by deleted accounts. This is one of the fastest ways to determine if a package may be abandoned.
Security News
In July, the Python Software Foundation mounted a quick response to address a leaked GitHub token, elected new board members, and added more members to the team supporting PSF and PyPI infrastructure.