1# Text 2 3显示一段文本的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含[Span](ts-basic-components-span.md)和[ImageSpan](ts-basic-components-imagespan.md)子组件。 13 14 15## 接口 16 17Text(content?: string | Resource) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' | 26 27## 属性 28 29除支持[通用属性](ts-universal-attributes-size.md)和[文本通用属性](ts-universal-attributes-text-style.md)外，还支持以下属性： 30 31| 名称 | 参数类型 | 描述 | 32| ----------------------- | ----------------------------------- | ------------------------------------------- | 33| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本段落在水平方向的对齐方式。<br/>默认值：TextAlign.Start<br/>**说明：**<br/>文本段落宽度占满Text组件宽度；可通过[align](ts-universal-attributes-location.md)属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部，Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中，Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。<br/>当`textAlign`属性设置为TextAlign.JUSTIFY时，最后一行文本不参与两端对齐，为水平对齐首部效果。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 34| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow: TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />当`overflow`设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合`maxLines`使用，单独设置不生效。设置TextOverflow.None与TextOverflow.Clip效果一样。<br />当`overflow`设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置`maxLines`及`copyOption`属性均不生效，此时不支持ImageSpan组件，并且在文本不可滚动时，设置`textAlign`属性生效；在文本可滚动时，设置`textAlign`属性不生效。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 35| maxLines | number | 设置文本的最大行数。<br />**说明：** <br />默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 `textOverflow`来指定截断方式。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 36| lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 37| decoration | {<br/>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?: [ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值：{<br/>type: TextDecorationType.None,<br/>color：Color.Black<br/>} <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 38| baselineOffset | number \| string | 设置文本基线的偏移量，默认值0。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置该值为百分比时，按默认值显示。 | 39| letterSpacing | number \| string | 设置文本字符间距。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置该值为百分比时，按默认值显示。<br /> 当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。 | 40| minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。<br/>需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效，对子组件不生效。<br/>自适应字号生效时，fontSize设置不生效。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 41| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。<br/>需配合minFontSize以及maxline或布局大小限制使用，单独设置不生效，对子组件不生效。<br/>自适应字号生效时，fontSize设置不生效。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 42| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br />默认值：TextCase.Normal <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 43| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 组件支持设置文本是否可复制粘贴。<br />默认值：CopyOptions.None <br/>该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。 | 44| draggable | boolean | 设置选中文本拖拽效果。<br/>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用；<br/>需配合copyOption一起使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，并且draggable设置为true时，支持对选中文本的拖拽以及选中内容复制到输入框。<br/>默认值：false <br />**说明：**<br />从 API version 9 开始支持。 | 45| textShadow<sup>10+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) | 设置文字阴影效果。 | 46| heightAdaptivePolicy<sup>10+</sup> | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 设置文本自适应高度的方式。<br/>默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST。<br/>**说明：**<br/>当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时，优先使用`maxLines`属性来调整文本高度。如果使用`maxLines`属性的布局大小超过了布局约束，则尝试在`minFontSize`和`maxFontSize`的范围内缩小字体以显示更多文本。<br/>当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时，优先使用`minFontSize`属性来调整文本高度。如果使用`minFontSize`属性可以将文本布局在一行中，则尝试在`minFontSize`和`maxFontSize`的范围内增大字体并使用最大可能的字体大小。<br/>当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时，优先使用布局约束来调整文本高度。如果布局大小超过布局约束，则尝试在`minFontSize`和`maxFontSize`的范围内缩小字体以满足布局约束。如果将字体大小缩小到`minFontSize`后，布局大小仍然超过布局约束，则删除超过布局约束的行。| 47| textIndent<sup>10+</sup> | number \| string | 设置首行文本缩进，默认值0。 | 48| font<sup>10+</sup> | [Font](ts-types.md#font) | 设置文本样式。包括字体大小、字体粗细、字体族和字体风格。 | 49 50> **说明：** 51> 52> 不支持Text内同时存在文本内容和Span或ImageSpan子组件。如果同时存在，只显示Span或ImageSpan内的内容。 53> 54> 通用属性中形状裁剪[clip](ts-universal-attributes-sharp-clipping.md#clip)属性，在Text组件中，默认值为true，即文本内容大于组件内容时，文本会截断。如果需要显示超出的部分，可以设置clip为false。 55> 56> 字体排版引擎会对开发者传入的宽度[width](ts-universal-attributes-size.md#width)进行向下取整，保证是整型像素后进行排版。如果字体排版引擎向上取整，可能会出现文字右侧被截断。 57 58## 事件 59 60支持[通用事件](ts-universal-events-click.md)。 61 62 63## 示例 64 65### 示例1 66 67```ts 68// xxx.ets 69@Entry 70@Component 71struct TextExample1 { 72 build() { 73 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 74 // 文本水平方向对齐方式设置 75 // 单行文本 76 Text('textAlign').fontSize(9).fontColor(0xCCCCCC) 77 Text('TextAlign set to Center.') 78 .textAlign(TextAlign.Center) 79 .fontSize(12) 80 .border({ width: 1 }) 81 .padding(10) 82 .width('100%') 83 Text('TextAlign set to Start.') 84 .textAlign(TextAlign.Start) 85 .fontSize(12) 86 .border({ width: 1 }) 87 .padding(10) 88 .width('100%') 89 Text('TextAlign set to End.') 90 .textAlign(TextAlign.End) 91 .fontSize(12) 92 .border({ width: 1 }) 93 .padding(10) 94 .width('100%') 95 96 // 多行文本 97 Text('This is the text content with textAlign set to Center.') 98 .textAlign(TextAlign.Center) 99 .fontSize(12) 100 .border({ width: 1 }) 101 .padding(10) 102 .width('100%') 103 Text('This is the text content with textAlign set to Start.') 104 .textAlign(TextAlign.Start) 105 .fontSize(12) 106 .border({ width: 1 }) 107 .padding(10) 108 .width('100%') 109 Text('This is the text content with textAlign set to End.') 110 .textAlign(TextAlign.End) 111 .fontSize(12) 112 .border({ width: 1 }) 113 .padding(10) 114 .width('100%') 115 116 117 // 文本超长时显示方式 118 Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC) 119 // 超出maxLines截断内容展示 120 Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.') 121 .textOverflow({ overflow: TextOverflow.Clip }) 122 .maxLines(1) 123 .fontSize(12) 124 .border({ width: 1 }) 125 .padding(10) 126 127 // 超出maxLines展示省略号 128 Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('') 129 .join('\u200B')) 130 .textOverflow({ overflow: TextOverflow.Ellipsis }) 131 .maxLines(1) 132 .fontSize(12) 133 .border({ width: 1 }) 134 .padding(10) 135 136 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 137 Text('This is the text with the line height set. This is the text with the line height set.') 138 .fontSize(12).border({ width: 1 }).padding(10) 139 Text('This is the text with the line height set. This is the text with the line height set.') 140 .fontSize(12).border({ width: 1 }).padding(10) 141 .lineHeight(20) 142 }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) 143 } 144} 145``` 146 147 148### 示例2 149 150```ts 151@Entry 152@Component 153struct TextExample2 { 154 build() { 155 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 156 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 157 Text('This is the text content with the decoration set to LineThrough and the color set to Red.') 158 .decoration({ 159 type: TextDecorationType.LineThrough, 160 color: Color.Red 161 }) 162 .fontSize(12) 163 .border({ width: 1 }) 164 .padding(10) 165 .width('100%') 166 167 168 Text('This is the text content with the decoration set to Overline and the color set to Red.') 169 .decoration({ 170 type: TextDecorationType.Overline, 171 color: Color.Red 172 }) 173 .fontSize(12) 174 .border({ width: 1 }) 175 .padding(10) 176 .width('100%') 177 178 179 Text('This is the text content with the decoration set to Underline and the color set to Red.') 180 .decoration({ 181 type: TextDecorationType.Underline, 182 color: Color.Red 183 }) 184 .fontSize(12) 185 .border({ width: 1 }) 186 .padding(10) 187 .width('100%') 188 189 // 文本基线偏移 190 Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) 191 Text('This is the text content with baselineOffset 0.') 192 .baselineOffset(0) 193 .fontSize(12) 194 .border({ width: 1 }) 195 .padding(10) 196 .width('100%') 197 Text('This is the text content with baselineOffset 30.') 198 .baselineOffset(30) 199 .fontSize(12) 200 .border({ width: 1 }) 201 .padding(10) 202 .width('100%') 203 Text('This is the text content with baselineOffset -20.') 204 .baselineOffset(-20) 205 .fontSize(12) 206 .border({ width: 1 }) 207 .padding(10) 208 .width('100%') 209 210 // 文本字符间距 211 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 212 Text('This is the text content with letterSpacing 0.') 213 .letterSpacing(0) 214 .fontSize(12) 215 .border({ width: 1 }) 216 .padding(10) 217 .width('100%') 218 Text('This is the text content with letterSpacing 3.') 219 .letterSpacing(3) 220 .fontSize(12) 221 .border({ width: 1 }) 222 .padding(10) 223 .width('100%') 224 Text('This is the text content with letterSpacing -1.') 225 .letterSpacing(-1) 226 .fontSize(12) 227 .border({ width: 1 }) 228 .padding(10) 229 .width('100%') 230 231 Text('textCase').fontSize(9).fontColor(0xCCCCCC) 232 Text('This is the text content with textCase set to Normal.') 233 .textCase(TextCase.Normal) 234 .fontSize(12) 235 .border({ width: 1 }) 236 .padding(10) 237 .width('100%') 238 // 文本全小写展示 239 Text('This is the text content with textCase set to LowerCase.') 240 .textCase(TextCase.LowerCase) 241 .fontSize(12) 242 .border({ width: 1 }) 243 .padding(10) 244 .width('100%') 245 // 文本全大写展示 246 Text('This is the text content with textCase set to UpperCase.') 247 .textCase(TextCase.UpperCase) 248 .fontSize(12).border({ width: 1 }).padding(10) 249 250 }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) 251 } 252} 253``` 254 255 256### 示例3 257 258```ts 259@Entry 260@Component 261struct TextExample { 262 build() { 263 Column({ space: 8 }) { 264 // 设置文字阴影效果 265 Text('textShadow').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 266 Text('textShadow') 267 .width('80%') 268 .height(55) 269 .fontSize(40) 270 .lineHeight(55) 271 .textAlign(TextAlign.Center) 272 .textShadow({ radius: 10, color: Color.Black, offsetX: 0, offsetY: 0 }) 273 .borderWidth(1) 274 Divider() 275 // 设置文本自适应高度的方式 276 Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 277 Text('This is the text with the height adaptive policy set') 278 .width('80%') 279 .height(90) 280 .borderWidth(1) 281 .minFontSize(10) 282 .maxFontSize(30) 283 .maxLines(3) 284 .textOverflow({ overflow: TextOverflow.Ellipsis }) 285 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 286 Text('This is the text with the height adaptive policy set') 287 .width('80%') 288 .height(90) 289 .borderWidth(1) 290 .minFontSize(10) 291 .maxFontSize(30) 292 .maxLines(3) 293 .textOverflow({ overflow: TextOverflow.Ellipsis }) 294 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 295 Text('This is the text with the height adaptive policy set') 296 .width('80%') 297 .height(90) 298 .borderWidth(1) 299 .minFontSize(10) 300 .maxFontSize(30) 301 .maxLines(3) 302 .textOverflow({ overflow: TextOverflow.Ellipsis }) 303 .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST) 304 Divider() 305 // 设置文本超长时以跑马灯的方式展示 306 Text('marquee').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 307 Text('This is the text with the text overflow set marquee') 308 .width(300) 309 .borderWidth(1) 310 .textOverflow({ overflow: TextOverflow.MARQUEE }) 311 } 312 } 313} 314``` 315 316
