1# text 2 3The **\<text>** component is used to display a piece of textual information. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name| Type| Default Value| Mandatory| Description| 18| -------- | -------- | -------- | -------- | -------- | 19| id | string | - | No| Unique ID of the component.| 20| style | string | - | No| Style declaration of the component.| 21| class | string | - | No| Style class of the component, which is used to refer to a style table.| 22| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 23 24 25## Events 26 27| Name| Parameter| Description| 28| -------- | -------- | -------- | 29| click | - | Triggered when the component is clicked.| 30| longpress | - | Triggered when the component is long pressed.| 31| swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | Triggered when a user quickly swipes on the component.| 32 33 34## Styles 35 36| Name| Type| Default Value| Mandatory| Description| 37| -------- | -------- | -------- | -------- | -------- | 38| color | <color> | \#ffffff | No| Font color.| 39| font-size | <length> | 30px | No| Font size. | 40| letter-spacing | <length> | 2px | No| Character spacing (px).| 41| text-align | string | left | No| Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.| 42| text-overflow | string | clip | No| Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.| 43| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.| 44| width | <length> \| <percentage><sup>5+</sup> | 0px | No| Component width.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.| 45| height | <length> \| <percentage><sup>5+</sup> | 0px | No| Component height.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.| 46| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 47| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 48| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 49| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 50| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 51| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 52| border-radius | <length> | - | No| Radius of round-corner borders.| 53| background-color | <color> | - | No| Background color.| 54| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| 55| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 56| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | 57 58## Example 59 60```html 61<!-- xxx.hml --> 62<div class="container"> 63 <text class="title"> 64 Hello {{ title }} 65 </text> 66</div> 67``` 68 69```CSS 70/* xxx.css */ 71.container { 72 width: 100%; 73 height: 100%; 74 justify-content: center; 75 align-items: center; 76} 77 78.title { 79 width: 100px; 80 font-size: 30px; 81 text-align: center; 82 color: red; 83} 84``` 85 86```javascript 87// xxx.js 88export default { 89 data: { 90 title: "" 91 }, 92 onInit() { 93 this.title = "World"; 94 } 95} 96``` 97 98 99
