• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <text> Development
2
3
4The **<text>** component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
5
6
7## Creating a <text> Component
8
9Create a **<text>** component in the .hml file under **pages/index**.
10
11```
12<!-- xxx.hml -->
13<div class="container" style="text-align: center;justify-content: center; align-items: center;">
14  <text>Hello World</text>
15</div>
16```
17
18```
19/* xxx.css */
20.container {
21  width: 100%;
22  height: 100%;
23  flex-direction: column;
24  align-items: center;
25  justify-content: center;
26  background-color: #F1F3F5;
27}
28```
29
30![en-us_image_0000001222807780](figures/en-us_image_0000001222807780.png)
31
32
33## Setting the Text Style and Attributes
34
35- Adding a text style
36
37Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
38
39
40  ```
41  <!-- xxx.hml -->
42  <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
43    <text style="color: blueviolet; font-size: 40px; allow-scale:true">
44      This is a passage
45    </text>
46    <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
47      This is a passage
48    </text>
49  </div>
50```
51
52
53  ```
54  /* xxx.css */
55  .container {
56    width: 100%;
57    height: 100%;
58    flex-direction: column;
59    align-items: center;
60    justify-content: center;
61    background-color: #F1F3F5;
62  }
63```
64
65    ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
66
67
68- Adding a text modifier
69
70Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
71
72
73  ```
74  <!-- xxx.hml -->
75  <div class="container" style="background-color:#F1F3F5;">
76    <text style="text-decoration:underline">
77      This is a passage
78    </text>
79    <text style="text-decoration:line-through;text-decoration-color: red">
80      This is a passage
81    </text>
82  </div>
83```
84
85
86  ```
87  /* xxx.css */
88  .container {
89    width: 100%;
90    height: 100%;
91    flex-direction: column;
92    align-items: center;
93    justify-content: center;
94  }
95  text{
96    font-size: 50px;
97  }
98```
99
100  ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
101
102
103- Hiding text content
104
105Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
106
107
108  ```
109  <!-- xxx.hml -->
110  <div class="container">
111    <text class="text">
112      This is a passage
113    </text>
114  </div>
115```
116
117
118  ```
119  /* xxx.css */
120  .container {
121    width: 100%;
122    height: 100%;
123    flex-direction: column;
124    align-items: center;
125    background-color: #F1F3F5;
126    justify-content: center;
127  }
128  .text{
129    width: 200px;
130    max-lines: 1;
131   text-overflow:ellipsis;
132  }
133```
134
135  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
136  > - **text-overflow** must be used together with **max-lines**.
137  >
138> - **max-lines** indicates the maximum number of lines in the text.
139
140  ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
141
142
143- Setting the text line breaking mode
144
145Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
146
147
148  ```
149  <!-- xxx.hml -->
150  <div class="container">
151    <div class="content">
152      <text class="text1">
153        Welcome to the world
154      </text>
155      <text class="text2">
156        Welcome to the world
157      </text>
158    </div>
159  </div>
160```
161
162
163  ```
164  /* xxx.css */
165  .container {
166    width: 100%;
167    height: 100%;
168    background-color: #F1F3F5;
169    flex-direction: column;
170    align-items: center;
171    justify-content: center;
172  }
173  .content{
174    width: 50%;
175    flex-direction: column;
176    align-items: center;
177    justify-content: center;
178  }
179  .text1{
180    width: 100%;
181    height: 200px;
182    border:1px solid #1a1919;
183    margin-bottom: 50px;
184    text-align: center;
185    word-break: break-word;
186    font-size: 40px;
187  }
188  .text2{
189    width: 100%;
190    height: 200px;
191    border:1px solid #0931e8;
192    text-align: center;
193    word-break: break-all;
194    font-size: 40px;
195  }
196```
197
198    ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
199
200
201- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component
202
203  ```
204  <!-- xxx.hml -->
205  <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
206    <text style="font-size: 45px;">
207      This is a passage
208    </text>
209    <text style="font-size: 45px;">
210      <span style="color: aqua;">This </span>
211      <span style="color: #F1F3F5;">
212        1
213      </span>
214      <span style="color: blue;"> is a </span>
215      <span style="color: #F1F3F5;">
216        1
217      </span>
218      <span style="color: red;">  passage </span>
219    </text>
220  </div>
221  ```
222
223  ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
224
225  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
226  > - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
227  >
228  > - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so.
229
230
231## Example Scenario
232
233Use the **&lt;text&gt;** component to display text content through data binding. Use the **&lt;span&gt;** child component to hide or display text content by setting the **show** attribute.
234
235
236```
237<!-- xxx.hml -->
238<div class="container">
239  <div style="align-items: center;justify-content: center;">
240    <text class="title">
241      {{ content }}
242    </text>
243    <switch checked="true" onchange="test"></switch>
244  </div>
245  <text class="span-container" style="color: #ff00ff;">
246    <span show="{{isShow}}">  {{ content  }}  </span>
247    <span style="color: white;">
248        1
249    </span>
250    <span style="color: #f76160">Hide clip </span>
251  </text>
252</div>
253```
254
255
256```
257/* xxx.css */
258.container {
259  width: 100%;
260  height: 100%;
261  align-items: center;
262  flex-direction: column;
263  justify-content: center;
264  background-color: #F1F3F5;
265}
266.title {
267  font-size: 26px;
268  text-align:center;
269  width: 200px;
270  height: 200px;
271}
272```
273
274
275```
276// xxx.js
277export default {
278  data: {
279   isShow:true,
280    content: 'Hello World'
281  },
282  onInit(){    },
283  test(e) {
284    this.isShow = e.checked
285  }
286}
287```
288
289![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)