1# text 2 3> **NOTE** 4> 5> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6> 7> - The text content must be written in the content area. 8 9The **\<text>** component is used to display a piece of textual information. 10 11## Required Permissions 12 13None 14 15 16## Child Components 17 18Only the **[\<span>](../arkui-js/js-components-basic-span.md)** component is supported. 19 20 21## Attributes 22 23The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported. 24 25 26## Styles 27 28In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 29 30| Name | Type | Default Value | Mandatory | Description | 31| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 32| color | <color> | #e5000000 | No | Font color. | 33| font-size | <length> | 30px | No | Font size. | 34| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.| 35| letter-spacing | <length> | 0px | No | Character spacing (px). | 36| word-spacing<sup>7+</sup> | <length> \| <percentage> \| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:<br>**normal**: default spacing.| 37| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style| 38| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.| 39| text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.| 40| text-decoration-color<sup>7+</sup> | <color> | - | No | Color of the text decoration. | 41| text-align | string | start<br> | 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.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.| 42| line-height | <length> \| <percentage><sup>7+</sup> \| string<sup>7+</sup> | 0px<sup>1-6</sup><br>normal<sup>7+</sup> | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The value of the string type is as follows:<br>**normal**<sup>7+</sup>: default line height | 43| text-overflow | string | clip | No | Display mode when the text is too long. This style takes effect when the maximum number of lines is specified. 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. This style must be used together with **max-lines**.| 44| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| 45| max-lines | number \| string<sup>7+</sup> | - | No | Maximum number of text lines. The value of the string type is as follows:<br>- **auto**<sup>7+</sup>: The number of text lines adapts to the container height. | 46| min-font-size | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| 47| max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| 48| font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | 49| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example values: **12px,14px,16px**| 50| word-break<sup>6+</sup> | string | normal | No | Text line breaking mode. The options are as follows:<br>- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br>- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br>- **break-word**: Works in the same way as **break-all**, except that it does not break unbreakable words.| 51| text-indent<sup>7+</sup> | <length> | - | No | Indentation of the first line. | 52| white-space<sup>7+</sup> | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br>- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br>- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br>- **pre**: All contents are output as-is.<br>- **pre-wrap**: All contents are output as-is with line breaks.<br>- **pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.| 53| adapt-height<sup>7+</sup> | boolean | false | No | Whether the text size adapts to the container height.<br>The settings take effect after font size auto-adaptation is configured. | 54 55> **NOTE** 56> - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement. 57> 58> - Use the escape character **\r\n** for newline. 59> 60> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**. 61> 62> - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed. 63> 64> - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**). 65> 66> - The **\<text>** component cannot contain both the text and the child component **\<span>**. If both of them exist, only the content in **\<span>** is displayed. 67 68 69## Events 70 71The [universal events](../arkui-js/js-components-common-events.md) are supported. 72 73## Methods 74 75The [universal methods](../arkui-js/js-components-common-methods.md) are supported. 76 77 78## Example 79 80```html 81<!-- xxx.hml --> 82<div class="container"> 83 <div class="content"> 84 <text class="title"> 85 Hello {{ title }} 86 </text> 87 </div> 88</div> 89``` 90 91```css 92/* xxx.css */ 93.container { 94 display: flex; 95 justify-content: center; 96 align-items: center; 97} 98.content{ 99 width: 400px; 100 height: 400px; 101 border: 20px; 102} 103.title { 104 font-size: 80px; 105 text-align: center; 106 width: 400px; 107 height: 400px; 108} 109``` 110 111```js 112// xxx.js 113export default { 114 data: { 115 title: 'World' 116 } 117} 118``` 119 120 121 122```html 123<!-- xxx.hml --> 124<div class="container"> 125 <text class="text1"> 126 This is a passage 127 </text> 128 <text class="text2"> 129 This is a passage 130 </text> 131</div> 132``` 133 134```css 135/* xxx.css */ 136.container { 137 flex-direction: column; 138 align-items: center; 139 background-color: #F1F3F5; 140 justify-content: center; 141} 142.text1{ 143 word-spacing: 10px; 144 adapt-height: true; 145} 146.text2{ 147 width: 200px; 148 max-lines: 1; 149 text-overflow: ellipsis; 150 text-valign: middle; 151 line-height: 40px; 152 text-decoration: underline; 153 text-decoration-color: red; 154 text-indent: 20px; 155 white-space: pre; 156} 157``` 158 159 160
