• 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```html
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```css
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
37  Set the **color**, **font-size**, **allow-scale**, **word-spacing**, and **text-align** attributes to add the color, size, zoom, text spacing, and vertical alignment of the text.
38
39  ```html
40  <!-- xxx.hml -->
41  <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
42    <text style="color: blueviolet; font-size: 40px; allow-scale:true">
43      This is a passage
44    </text>
45    <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
46      This is a passage
47    </text>
48  </div>
49  ```
50
51  ```css
52  /* xxx.css */
53  .container {
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    ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
64
65
66- Adding a text modifier
67
68  Set 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 Styles](../reference/arkui-js/js-components-basic-text.md).
69
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  ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
98
99
100- Hiding text content
101
102
103Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
104
105
106  ```html
107  <!-- xxx.hml -->
108  <div class="container">
109    <text class="text">
110      This is a passage
111    </text>
112  </div>
113  ```
114
115  ```css
116  /* xxx.css */
117  .container {
118    width: 100%;
119    height: 100%;
120    flex-direction: column;
121    align-items: center;
122    background-color: #F1F3F5;
123    justify-content: center;
124  }
125  .text{
126    width: 200px;
127    max-lines: 1;
128    text-overflow:ellipsis;
129  }
130  ```
131
132  > **NOTE**
133  > - **text-overflow** must be used together with **max-lines**.
134  > - **max-lines** indicates the maximum number of lines in the text.
135
136  ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
137
138
139- Setting the text line breaking mode
140
141
142Set 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).
143
144
145  ```html
146  <!-- xxx.hml -->
147  <div class="container">
148    <div class="content">
149      <text class="text1">
150        Welcome to the world
151      </text>
152        <text class="text2">
153          Welcome to the world
154        </text>
155    </div>
156  </div>
157  ```
158
159  ```css
160  /* xxx.css */
161  .container {
162    width: 100%;
163    height: 100%;
164    background-color: #F1F3F5;
165    flex-direction: column;
166    align-items: center;
167    justify-content: center;
168  }
169  .content{
170    width: 50%;
171    flex-direction: column;
172    align-items: center;
173    justify-content: center;
174  }
175  .text1{
176    width: 100%;
177    height: 200px;
178    border:1px solid #1a1919;
179    margin-bottom: 50px;
180    text-align: center;
181    word-break: break-word;
182    font-size: 40px;
183  }
184  .text2{
185    width: 100%;
186    height: 200px;
187    border:1px solid #0931e8;
188    text-align: center;
189    word-break: break-all;
190    font-size: 40px;
191  }
192  ```
193
194    ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
195
196
197- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component
198
199  ```html
200  <!-- xxx.hml -->
201  <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;  width: 100%;height: 100%;">
202    <text style="font-size: 45px;">
203      This is a passage
204    </text>
205    <text style="font-size: 45px;">
206      <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1
207      </span>
208      <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>
209      <span style="color: red;">  passage </span>
210    </text>
211  </div>
212  ```
213
214  ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
215
216  > **NOTE**
217  > - 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.
218  >
219  > - 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.
220
221
222## Example Scenario
223
224Use 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.
225
226```html
227<!-- xxx.hml -->
228<div class="container">
229  <div style="align-items: center;justify-content: center;">
230    <text class="title">
231      {{ content }}
232    </text>
233    <switch checked="true" onchange="test"></switch>
234  </div>
235  <text class="span-container" style="color: #ff00ff;">
236    <span show="{{isShow}}">  {{ content  }}  </span>
237    <span style="color: white;">
238        1
239    </span>
240    <span style="color: #f76160">Hide clip </span>
241  </text>
242</div>
243```
244
245```css
246/* xxx.css */
247.container {
248  width: 100%;
249  height: 100%;
250  align-items: center;
251  flex-direction: column;
252  justify-content: center;
253  background-color: #F1F3F5;
254}
255.title {
256  font-size: 26px;
257  text-align:center;
258  width: 200px;
259  height: 200px;
260}
261```
262
263```js
264// xxx.js
265export default {
266  data: {
267    isShow:true,
268    content: 'Hello World'
269  },
270  onInit(){    },
271  test(e) {
272    this.isShow = e.checked
273  }
274}
275```
276
277![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)