information
This guideline describes the target design for the text. Some features are not yet implemented in the text web component.

Intro

You can use the text component to display a given text.

When to Use

Do

Use the text component if you want to display text inside a form, table, or other content area.

Don't

Don’t use the text component if you want to label another component (such as an input field). Use the label instead.

Behavior and Interaction

Wrapping and Truncation

A text can wrap, truncate, or combine wrapping and truncation. In the combined variant, you define a maximum number of lines. The text wraps until the last line is reached and truncates at the end of the last line.

Text wraps

Text wraps

Text truncates

Text truncates

Combined wrapping and truncation with 2 lines

Combined wrapping and truncation with 2 lines

Wrapping with Hyphenation

Text can wrap with or without hyphenation. If you activate hyphenation, words that no longer fit into the current line are split in to syllables. Syllables that don’t fit into the current line are wrapped to the next line. The breakpoint is marked with a hyphen.

Text wraps with hyphenation

Text wraps with hyphenation

Preserve White Space

Some text formats can include spaces (such as ID formats with spaces and tabs). To ensure that these texts are displayed accurately, you can configure the text component to preserve white space within the text.

Text with and without preserved white space

Text with and without preserved white space

Empty Indicator Mode

You can display an n-dash (“–”) to denote an empty text. This can make information easier for users to scan, such as empty values in forms.

Depending on the user’s language, the symbol may vary.

Empty text indicator in a form

Empty text indicator in a form

Components

Implementation

  • Text
    (UI5 Web Components documentation)

Specifications

Components

Implementation

  • Text
    (UI5 Web Components documentation)