Render text with specified styles using the text component - Mobile Platform as a Service

The <text> component is a built-in component of the Ant Dynamic Card Engine that renders text with specified styles. This component can only contain text values. You can use `{{}}` to insert variable values as text content.

Support for embedded components

Other components cannot be nested in this component.

Styles

The <text> component supports all the styles described in General styles, in addition to the following special styles:

Font-related

Property	Description	Value type	Default value	Optional values	Syntax	Notes
font-size	Font size	Length unit	16px		font-size: 10px;
font-weight	Font weight	string	normal	normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900. `normal` is equivalent to `400`. iOS supports all nine values. On Android, a value of `400` is rendered as `normal`, `700` or higher is rendered as `bold`, and values between 400 and 700 are rendered with a FakeBold effect.	font-weight: bold;
font-weight	Font weight	string	normal		font-weight: 700;
font-style	Font style	string	normal	normal, italic	font-style: normal;
font-family	Sets the font	string	Platform default font		font-family: PingFangSC-Regular;	Consistency of this setting across different platforms and devices is not guaranteed. If the specified font is not available on the platform, it falls back to the platform's default font.

Layout-related

Property	Description	Value type	Default value	Optional values	Syntax	Notes
lines	Number of text lines	int	0, which means no line limit		lines: 10;
text-align	Text alignment	string	left	left, center, right	text-align: center;
text-overflow	Sets the ellipsis style for overflowing content	string	clip	clip, ellipsis	text-overflow: clip;	`ellipsis` is currently supported only for single-line text. Note On some Android phones, the ellipsis may appear in the middle of the text. This is determined by the operating system.
line-height	Sets the line height of the text	Length unit + number	0		line-height: 12px;	If a number is specified, the value is `fontSize` × `value`. If a length unit with a `px` suffix is specified, the value is the `value` itself. If a percentage is specified, the value is `fontSize` × `value`.
white-space	Controls the line break and whitespace policy in the text	string	pre-wrap	normal: Whitespace is collapsed and text wraps automatically. Existing line breaks and paragraph breaks are ignored. nowrap: Collapses whitespace characters. The text does not wrap and is displayed on a single line, which can extend beyond the background box. pre: Whitespace characters do not collapse, line breaks occur between text segments, and text within each segment does not auto wrap (each segment is displayed on a single line and can extend beyond the background). pre-wrap: Whitespace characters are preserved, line breaks are preserved, and text wraps automatically. pre-line: Whitespace characters are collapsed, line breaks are preserved, and text wraps automatically.	white-space: nowrap;	-
word-wrap	Controls how lines are broken, such as whether to break words	string	break-word	normal: Breaks lines at the end of words. Can extend beyond the background box. break-word: Breaks lines at the end of words. If the line is still too long, it can break within the word. anywhere: Can break lines at any point.	word-wrap: break-word:	-
word-break	Controls how words are broken when a line breaks	string	None	normal: Words are not broken at line breaks. Can extend beyond the background box. break-all: Words can be broken at any point to wrap. keep-all: Same as `normal`.	word-break;	Does not differentiate between Chinese, English, and mixed Chinese-English text.
letter-spacing	Controls the spacing between characters. Can be positive or negative.	string	0	normal: No extra space. Single value length unit: Can be positive or negative.	letter-spacing:5px;	-
text-indent	Indentation of the first line of text. Can be positive, negative, or a percentage of the parent element's width.	string	0	Single value length unit + percentage: Can be positive or negative.	text-indent:30%;	-
vertical-align	Vertical alignment style of the text	string	baseline	baseline\|sub\|super\|length\|percentage\|top\|bottom\|middle\|top\|bottom Important The baseline is related to the font. Use this property with caution. `middle` aligns the middle of the element with the baseline of the parent plus half the x-height of the parent. `baseline` aligns the baseline of the element with the baseline of its parent. The HTML specification does not detail the baseline of some replaced elements, such as `<textarea>`. This means the behavior of these elements with this value may vary across browsers. `sub` aligns the baseline of the element with the subscript-baseline of its parent. `super` aligns the baseline of the element with the superscript-baseline of its parent. `top` aligns the top of the element and its descendants with the top of the entire line. `bottom` aligns the bottom of the element and its descendants with the bottom of the entire line. For elements that do not have a baseline, the bottom margin edge is used instead.	vertical-align:middle	-

Effects-related

Property	Description	Value type	Default value	Optional values	Syntax	Notes
color	Font color	Color unit	0x000000		color:red;
					color:#333;
					color:rgb(255,0,255);
text-decoration	Text decoration	string	none	underline, none, line-through, overline	text-decoration: underline;	-
text-shadow	Text shadow	Length unit & Color unit		Supports the format `${x} ${y} ${size} ${color}`. `x`, `y`, and `size` are length units, and `color` is a color unit.	text-shadow: 2px 2px 3px gray;	The color defaults to the font color. `x` and `y` are required parameters. Others are optional.
text-shadow-color	Text shadow color	Color unit	Same as `color`		text-shadow-color: blue;	Optional parameter
text-shadow-offset	Text shadow offset	Length unit		-	text-shadow-offset: 2px 2px;	Required parameter
text-shadow-radius	Text shadow radius	Length unit	0		text-shadow-radius: 3px;	Optional parameter

Properties

Property	Description	Value type	Default value	Syntax	Notes
value	The text content of the component	string		<text value="Text content string"></text>
line-space	Line spacing, such as 4px	Length unit		<text line-space="4px"></text>

Events

The <text> component supports all the events listed in Common Events.

Example

<text class="text">
                The Cube engine is a simple, easy-to-use, cross-platform development solution. It lets you build high-performance, scalable native applications with a web development experience. Vue is a lightweight and powerful progressive frontend framework.
</text>


.text {
    lines: 3;
    color: #666666;
    font-size: 32px
  }

Differences from web

The main differences between Ant Dynamic Cards and the web are described below.

Ant Dynamic Cards does not differentiate between Chinese and English text when handling `word-break`.
Ant Dynamic Cards does not differentiate between mixed Chinese and English text when a long word overflows the background box.

Web	Ant Dynamic Card
If `word-wrap` is not specified, the behavior is the same as `word-wrap: normal`.	If `word-wrap` is not specified, the behavior is the same as `word-wrap: break-word`.
`word-wrap: normal`: Words do not break and overflow the background box. A word is defined as a sequence of English characters.	`word-wrap: normal`: Words do not break and overflow the background box. A word is defined as a sequence of English characters and can include Chinese characters.
`word-break: normal`: Chinese text wraps to the next line. English words do not break and overflow the background box.	`word-break: normal`: Chinese text wraps to the next line. English words do not break and overflow the background box.
`word-break: keep-all`: Neither Chinese text nor English words wrap. They overflow the background box.	`word-break: keep-all`: The behavior is the same as `normal`.
-	`letter-spacing` is supported on Android 5.0 and later.

Sample code

Click detailFontSize.zip to download the sample code for font size.
Click detailFontWeight.zip to download the sample code for font weight.
Click detailTextAlign.zip to download the sample code for text alignment.