Skip to main content

Word-Wrap

Overview​

Wraps text at a given maximum line length, breaking at spaces where possible and allowing to inject custom separators in-between values, if there are multiple of them.

<word-wrap

  value: string

  ↪ The text to be wrapped

  width: number

  ↪ Maximum line-width in characters

  token-renderer: markup(null)

  ↪ Renderer called for each displayed token; introduces:

  ↪ - token: String

  value-separator: markup(null)

  ↪ Separator in-between values

/>

Examples​

Single Value​

Code-Blocks are only available within the browser

Multiple Values​

Code-Blocks are only available within the browser

In order to attach a custom appearance to only the value-tokens, but not the value-separators, make use of the Code-Blocks are only available within the browser attribute.

Code-Blocks are only available within the browser

Value Shorthand​

For convenience, the Code-Blocks are only available within the browser attribute also supports a bound expression of arbitrary name, while all other attributes support bound expressions with matching names.

Code-Blocks are only available within the browser