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