Text

The Text component is used to display text in your apps. It supports both binding to Data Values, and constant text-defined design time in the UI Designer.

White Space and Line Break

Sequences of white space in the text value are by default collapsed, and newline characters are handled the same as the other white space. Its lines wrap as necessary to fill the container.

This default behaviour can be overridden. In the Text component's Property Pane, open the format_paint Style section and change the Line Break value to, for instance, Pre Wrap to respect sequences of white space and newline characters. Have a look in the corresponding Blue Dot for details about all Line Break options.

Wrapping and ellipsis (...)

You may force the text to be truncated into 1 line with an ellipsis (...) at the end, using the No Wrap setting.

If you do not tick No Wrap, the text will / may break over multiple lines.

You may limit the number of lines using the Max Lines setting. E.g. having the Max Lines set to 4, the text will be truncated with an ellipsis (...) at the end of the 4th line.

Markdown

The Text component has built-in support for parsing Markdown content. You may activate this by ticking Enable Markdown in the component properties. Styling defined in the current Theme is applied to relevant HTML elements.

Markdown is a lightweight markup language for creating formatted text using a plain-text editor, allowing text to be converted to HTML.

See the Markdown section for details about supported Markdown syntax.