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.
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.
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.
import
.import WordBreaks from 'device-agnostic-ui/public/components/WordBreaks.js';
require
.const WordBreaks = require('device-agnostic-ui/public/components/WordBreaks');
import
. Convenient, but technically inferior to a deep import
.import { WordBreaks } from 'device-agnostic-ui';
require
. Convenient, but technically inferior to a deep require
.const { WordBreaks } = require('device-agnostic-ui');
<Heading>
with <WordBreaks>
.import { Heading, WordBreaks } from 'device-agnostic-ui';
const result = (
<Heading style={{ maxWidth: '4em' }}>
<WordBreaks>learnHTML5WithUs</WordBreaks>
</Heading>
);
<Heading>
without <WordBreaks>
.import { Heading } from 'device-agnostic-ui';
const result = <Heading style={{ maxWidth: '4em' }}>learnHTML5WithUs</Heading>;