• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# text开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @xiangyuan6-->
5<!--Designer: @pssea-->
6<!--Tester: @jiaoaozihao-->
7<!--Adviser: @HelloCrease-->
8
9text是文本组件，用于呈现一段文本信息。具体用法请参考[text API](../reference/apis-arkui/arkui-js/js-components-basic-text.md)。
10
11
12## 创建text组件
13
14在pages/index目录下的hml文件中创建一个text组件。
15
16```html
17<!-- xxx.hml -->
18<div class="container" style="text-align: center;justify-content: center; align-items: center;">
19  <text>Hello World</text>
20</div>
21```
22
23```css
24/* xxx.css */
25.container {
26  width: 100%;
27  height: 100%;
28  flex-direction: column;
29  align-items: center;
30  justify-content: center;
31  background-color: #F1F3F5;
32}
33```
34
35![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png)
36
37
38## 设置text组件样式和属性
39
40- 添加文本样式
41
42  设置color、font-size、allow-scale、word-spacing、text-align属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在水平方向的对齐方式。
43
44  ```html
45  <!-- xxx.hml -->
46  <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
47    <text style="color: blueviolet; font-size: 40px; allow-scale:true">
48      This is a passage
49    </text>
50    <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;text-align: center">
51      This is a passage
52    </text>
53  </div>
54  ```
55
56  ```css
57  /* xxx.css */
58  .container {
59    display: flex;
60    width: 100%;
61    height: 100%;
62    flex-direction: column;
63    align-items: center;
64    justify-content: center;
65    background-color: #F1F3F5;
66  }
67  ```
68
69  ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
70
71
72
73- 添加划线
74
75  设置text-decoration和text-decoration-color属性为文本添加划线和划线颜色，text-decoration枚举值请参考    text自有样式。
76
77  ```html
78  <!-- xxx.hml -->
79  <div class="container" style="background-color:#F1F3F5;">
80    <text style="text-decoration:underline">
81      This is a passage
82    </text>
83    <text style="text-decoration:line-through;text-decoration-color: red">
84      This is a passage
85     </text>
86  </div>
87  ```
88
89  ```css
90  /* xxx.css */
91  .container {
92    width: 100%;
93    height: 100%;
94    flex-direction: column;
95    align-items: center;
96    justify-content: center;
97  }
98  text{
99    font-size: 50px;
100  }
101  ```
102
103  ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
104
105
106
107- 隐藏文本内容
108
109  当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
110
111  ```html
112  <!-- xxx.hml -->
113  <div class="container">
114    <text class="text">
115      This is a passage
116    </text>
117  </div>
118  ```
119
120  ```css
121  /* xxx.css */
122  .container {
123    width: 100%;
124    height: 100%;
125    flex-direction: column;
126    align-items: center;
127    background-color: #F1F3F5;
128    justify-content: center;
129  }
130  .text{
131    width: 200px;
132    max-lines: 1;
133    text-overflow:ellipsis;
134  }
135  ```
136
137  > **说明：**
138  > - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
139  > - max-lines属性设置文本最多可以展示的行数。
140
141
142  ​    ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
143
144- text组件支持[Span](../reference/apis-arkui/arkui-js/js-components-basic-span.md)子组件
145
146  ```html
147  <!-- xxx.hml -->
148  <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;  width: 100%;height: 100%;">
149    <text style="font-size: 45px;">
150      This is a passage
151    </text>
152    <text style="font-size: 45px;">
153      <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1
154      </span>
155      <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>
156      <span style="color: red;">  passage </span>
157    </text>
158  </div>
159  ```
160
161  ![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png)
162    > **说明：**
163    > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
164    >
165    > - 在使用Span子组件时，注意text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
166
167
168## 场景示例
169
170text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
171
172```html
173<!-- xxx.hml -->
174<div class="container">
175  <div style="align-items: center;justify-content: center;">
176    <text class="title">
177      {{ content }}
178    </text>
179    <switch checked="true" onchange="test"></switch>
180  </div>
181  <text class="span-container" style="color: #ff00ff;">
182    <span show="{{isShow}}">  {{ content  }}  </span>
183    <span style="color: white;">
184        1
185    </span>
186    <span style="color: #f76160">Hide clip </span>
187  </text>
188</div>
189```
190
191```css
192/* xxx.css */
193.container {
194  width: 100%;
195  height: 100%;
196  align-items: center;
197  flex-direction: column;
198  justify-content: center;
199  background-color: #F1F3F5;
200}
201.title {
202  font-size: 26px;
203  text-align:center;
204  width: 200px;
205  height: 200px;
206}
207```
208
209```js
210// xxx.js
211export default {
212  data: {
213    isShow:true,
214    content: 'Hello World'
215  },
216  onInit(){    },
217  test(e) {
218    this.isShow = e.checked
219  }
220}
221```
222
223![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif)