1# Text 2 3显示一段文本的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含[Span](ts-basic-components-span.md)子组件。 13 14 15## 接口 16 17Text(content?: string | Resource) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| -------- | -------- | -------- | -------- | 23| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' | 24 25## 属性 26 27除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 28 29| 名称 | 参数类型 | 描述 | 30| ----------------------- | ----------------------------------- | ------------------------------------------- | 31| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在水平方向的对齐方式。<br/>默认值：TextAlign.Start | 32| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow: TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />需配合`maxLines`使用，单独设置不生效。 | 33| maxLines | number | 设置文本的最大行数。<br />默认值：Infinity<br/>**说明：**<br />默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 `textOverflow`来指定截断方式。 | 34| lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 | 35| 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/>} | 36| baselineOffset | number \| string | 设置文本基线的偏移量，默认值0。 | 37| letterSpacing | number \| string | 设置文本字符间距。 | 38| minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。 | 39| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。 | 40| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br />默认值：TextCase.Normal | 41| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 组件支持设置文本是否可复制粘贴。<br />默认值：CopyOptions.None | 42 43> **说明：** 44> 45> 不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。 46 47 48## 示例 49 50### 示例1 51textAlign，textOverflow，maxLines，lineHeight使用示例。 52```ts 53// xxx.ets 54@Entry 55@Component 56struct TextExample1 { 57 build() { 58 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 59 // 文本水平方向对齐方式设置 60 // 单行文本 61 Text('textAlign').fontSize(9).fontColor(0xCCCCCC) 62 Text('TextAlign set to Center.') 63 .textAlign(TextAlign.Center) 64 .fontSize(12) 65 .border({ width: 1 }) 66 .padding(10) 67 .width('100%') 68 Text('TextAlign set to Start.') 69 .textAlign(TextAlign.Start) 70 .fontSize(12) 71 .border({ width: 1 }) 72 .padding(10) 73 .width('100%') 74 Text('TextAlign set to End.') 75 .textAlign(TextAlign.End) 76 .fontSize(12) 77 .border({ width: 1 }) 78 .padding(10) 79 .width('100%') 80 81 // 多行文本 82 Text('This is the text content with textAlign set to Center.') 83 .textAlign(TextAlign.Center) 84 .fontSize(12) 85 .border({ width: 1 }) 86 .padding(10) 87 .width('100%') 88 Text('This is the text content with textAlign set to Start.') 89 .textAlign(TextAlign.Start) 90 .fontSize(12) 91 .border({ width: 1 }) 92 .padding(10) 93 .width('100%') 94 Text('This is the text content with textAlign set to End.') 95 .textAlign(TextAlign.End) 96 .fontSize(12) 97 .border({ width: 1 }) 98 .padding(10) 99 .width('100%') 100 101 102 // 文本超长时显示方式 103 Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC) 104 // 超出maxLines截断内容展示 105 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.') 106 .textOverflow({ overflow: TextOverflow.None }) 107 .maxLines(1) 108 .fontSize(12) 109 .border({ width: 1 }) 110 .padding(10) 111 112 // 超出maxLines展示省略号 113 Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('') 114 .join('\u200B')) 115 .textOverflow({ overflow: TextOverflow.Ellipsis }) 116 .maxLines(1) 117 .fontSize(12) 118 .border({ width: 1 }) 119 .padding(10) 120 121 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 122 Text('This is the text with the line height set. This is the text with the line height set.') 123 .fontSize(12).border({ width: 1 }).padding(10) 124 Text('This is the text with the line height set. This is the text with the line height set.') 125 .fontSize(12).border({ width: 1 }).padding(10) 126 .lineHeight(20) 127 }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) 128 } 129} 130``` 131 132 133### 示例2 134decoration，baselineOffset，letterSpacing，textCase使用示例： 135```ts 136@Entry 137@Component 138struct TextExample2 { 139 build() { 140 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 141 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 142 Text('This is the text content with the decoration set to LineThrough and the color set to Red.') 143 .decoration({ 144 type: TextDecorationType.LineThrough, 145 color: Color.Red 146 }) 147 .fontSize(12) 148 .border({ width: 1 }) 149 .padding(10) 150 .width('100%') 151 152 153 Text('This is the text content with the decoration set to Overline and the color set to Red.') 154 .decoration({ 155 type: TextDecorationType.Overline, 156 color: Color.Red 157 }) 158 .fontSize(12) 159 .border({ width: 1 }) 160 .padding(10) 161 .width('100%') 162 163 164 Text('This is the text content with the decoration set to Underline and the color set to Red.') 165 .decoration({ 166 type: TextDecorationType.Underline, 167 color: Color.Red 168 }) 169 .fontSize(12) 170 .border({ width: 1 }) 171 .padding(10) 172 .width('100%') 173 174 // 文本基线偏移 175 Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) 176 Text('This is the text content with baselineOffset 0.') 177 .baselineOffset(0) 178 .fontSize(12) 179 .border({ width: 1 }) 180 .padding(10) 181 .width('100%') 182 Text('This is the text content with baselineOffset 30.') 183 .baselineOffset(30) 184 .fontSize(12) 185 .border({ width: 1 }) 186 .padding(10) 187 .width('100%') 188 Text('This is the text content with baselineOffset -20.') 189 .baselineOffset(-20) 190 .fontSize(12) 191 .border({ width: 1 }) 192 .padding(10) 193 .width('100%') 194 195 // 文本字符间距 196 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 197 Text('This is the text content with letterSpacing 0.') 198 .letterSpacing(0) 199 .fontSize(12) 200 .border({ width: 1 }) 201 .padding(10) 202 .width('100%') 203 Text('This is the text content with letterSpacing 3.') 204 .letterSpacing(3) 205 .fontSize(12) 206 .border({ width: 1 }) 207 .padding(10) 208 .width('100%') 209 Text('This is the text content with letterSpacing -1.') 210 .letterSpacing(-1) 211 .fontSize(12) 212 .border({ width: 1 }) 213 .padding(10) 214 .width('100%') 215 216 Text('textCase').fontSize(9).fontColor(0xCCCCCC) 217 Text('This is the text content with textCase set to Normal.') 218 .textCase(TextCase.Normal) 219 .fontSize(12) 220 .border({ width: 1 }) 221 .padding(10) 222 .width('100%') 223 // 文本全小写展示 224 Text('This is the text content with textCase set to LowerCase.') 225 .textCase(TextCase.LowerCase) 226 .fontSize(12) 227 .border({ width: 1 }) 228 .padding(10) 229 .width('100%') 230 // 文本全大写展示 231 Text('This is the text content with textCase set to UpperCase.') 232 .textCase(TextCase.UpperCase) 233 .fontSize(12).border({ width: 1 }).padding(10) 234 235 }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) 236 } 237} 238``` 239 240
