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`

Type	String (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`

Type	String (required)

Text to render with word break opportunities.

Examples

A narrow <Heading> with <WordBreaks>.

import { Heading, WordBreaks } from 'device-agnostic-ui'

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

learnHTML5WithUs

A narrow <Heading> without <WordBreaks>.

import { Heading } from 'device-agnostic-ui'

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