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