WordBreaks

Renders text with aesthetically pleasing word break opportunities.

It inserts <wbr> elements at word break opportunities, which don’t appear in the clipboard when the text is copied.

Useful for narrow headings that contain long, camel cased strings.

Props

placeholder

TypeString (optional)
Default<wbr />

Arbitrary; used in the processing of the text. Only needs to be customized if the text might contain the default value.

children

TypeString (required)

Text to render with word break opportunities.

Examples

A narrow <Heading> with <WordBreaks>.
import { Heading, WordBreaks } from 'device-agnostic-ui'

<Heading style={{ maxWidth: '4em' }}>
  <WordBreaks>learnHTML5WithUs</WordBreaks>
</Heading>

learnHTML5WithUs

A narrow <Heading> without <WordBreaks>.
import { Heading } from 'device-agnostic-ui'

<Heading style={{ maxWidth: '4em' }}>learnHTML5WithUs</Heading>

learnHTML5WithUs

Tags