Intro

The text control is used to display text. It generally contains the text that developers want apps to display (property: text).

Text used within a form

Text used within a form

Usage

Use the text control if you want to display text inside a form, table, or any other content area. Do not use the text control if you need a label, or vice versa.

Responsiveness

The text control is fully adaptive to all screen sizes. You can also set a specific width and overwrite the default value. The resizing behavior depends on the settings that the apps use for the text.

Wrapping / Truncation

You can define whether the text should wrap or truncate directly (property: wrapping).

You can also define how often the text should wrap before it truncates (property: maxLines).

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Text – Maximum line examples

Text – Maximum line examples

Hyphenation

The text control supports hyphenation (property: wrappingtype =
Hyphenated). Switching on hyphenation activates it for all languages that have hyphenation support.
changes

[internal_only]

In the future, we plan to apply hyphenation only to a predefined set of languages (for example, languages that have a lot of long or compound words).

This will avoid unnecessary hyphenation in languages that have shorter words, such as English.

[/internal_only]

Text with hyphenation

Text with hyphenation

Text without hyphenation

Text without hyphenation

style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

White Spaces

The text control can preserve white spaces (property: renderWhitespace = true). For example, if the text contains ID formats with space and tab characters, you can use this option to render the IDs correctly.

White spaces are rendered

White spaces are rendered

Unnecessary white spaces are removed (default)

Unnecessary white spaces are removed (default)

Guidelines

Empty Indicator Mode

The emptyIndicatorMode property in sap.m.Text allows app developers to indicate an empty text to users by using an n-dash (“–”). If turned on, an n-dash is rendered when no text is visible. If turned off (default), the behavior is as it is. Depending on the language, the symbol may change.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Visual Design

  • Text (visual design specification)