Skip to main content

Text

<ui5-text> | Since 2.0.0

Overview

The ui5-text component displays text that can be used in any content area of an application.

Usage

  • Use the ui5-text if you want to display text inside a form, table, or any other content area.
  • Do not use the ui5-text if you need to reference input type of components (use ui5-label).

Responsive behavior

The ui5-text component is fully adaptive to all screen sizes. By default, the text will wrap when the space is not enough. In addition, the component supports truncation via the max-lines property, by defining the number of lines the text should wrap before start truncating.

ES6 Module Import

import "@ui5/webcomponents/dist/Text";

Basic Sample​

Properties​

maxLines​

DescriptionDefines the number of lines the text should wrap before it truncates.
Typenumber
DefaultInfinity

emptyIndicatorMode​

DescriptionSpecifies if an empty indicator should be displayed when there is no text.
Type"Off" | "On"
Default"Off"
Since2.2.0

Slots​

default​

DescriptionDefines the text of the component.
TypeArray<Node>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Max Lines​

The maxLines property defines the number of lines the text would wrap before start truncating.

Empty Indicator Mode​

The emptyIndicatorMode property specifies if an empty indicator should be displayed when there is no text.

Custom Styling​

The text can be customized with pure CSS, applied on the tag.

Render white space with custom styling​

Handle white spaces in the text with standard CSS, applied on the tag.

Hyphenation with custom styling​

The text hyphenation can be customized with pure CSS, applied on the tag.