1# span
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7As a child component of **[\<text>](js-components-basic-text.md)**, the **\<span>** component is used as a text modifier.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Not supported
17
18
19## Attributes
20
21The [universal attributes](js-components-common-attributes.md) are supported.
22
23>  **NOTE**
24>
25>  The **focusable** and **disabled** attributes are not supported.
26
27
28## Styles
29
30Only the following styles are supported.
31
32| Name             | Type                        | Default Value       | Mandatory  | Description                                      |
33| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
34| color           | &lt;color&gt;              | -          | No   | Font color of the modified text.                            |
35| font-size       | &lt;length&gt;             | 30px       | No   | Font size of the modified text.                            |
36| allow-scale     | boolean                    | true       | No   | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
37| font-style      | string                     | normal     | No   | Font style of the modified text. For details, see **font-style** of the [**\<text>**](js-components-basic-text.md#styles) component.|
38| font-weight     | number \| string | normal     | No   | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component.|
39| text-decoration | string                     | none       | No   | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](js-components-basic-text.md#styles) component.|
40| font-family     | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.|
41
42
43## Events
44
45Only the click event in [Universal Events](js-components-common-events.md) is supported.
46
47
48## Methods
49
50Not supported
51
52
53## Example
54
55```html
56<!-- xxx.hml -->
57<div class="container">
58  <text class="title">
59    <span class="spanTxt">span</span>
60  </text>
61</div>
62```
63
64```css
65/* xxx.css */
66.container {
67  display: flex;
68  justify-content: center;
69  align-items: center;
70}
71.title {
72  font-size: 30px;
73  text-align: center;
74  width: 100%;
75  height: 100px;
76}
77.spanTxt{
78  color: chartreuse;
79  font-size: 80px;
80}
81```
82
83![en-us_image_0000001152588626](figures/en-us_image_0000001152588626.png)
84