Text
<ui5-text>
| Since 2.0.0Overview
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​
emptyIndicatorMode​
Slots​
default​
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.