js-components-basic-span.md

# span<a name="EN-US_TOPIC_0000001127284860"></a>

The  **<span\>**  child component of  **<[text](js-components-basic-text.md)\>**  is used as a text modifier.

## Required Permissions<a name="section11257113618419"></a>

None

## Child Components<a name="section9288143101012"></a>

The  **<span\>**  child component is supported.

## Attributes<a name="section2907183951110"></a>

Attributes in  [Universal Attributes](js-components-common-attributes.md)  are supported.

>![](../../public_sys-resources/icon-note.gif) **NOTE:** 
>The  **focusable**  and  **disabled**  attributes are not supported.

## Styles<a name="section5775351116"></a>

Only the following style attributes are supported.

<a name="ta0a517e341374f8dbac91fcbabd0a5ff"></a>
<table><thead align="left"><tr id="r4898f887897a46fab1b4999a4f83402f"><th class="cellrowborder" valign="top" width="21.21212121212121%" id="mcps1.1.6.1.1"><p id="ac9b6b02cd94942a5a0de6e18b10be274"><a name="ac9b6b02cd94942a5a0de6e18b10be274"></a><a name="ac9b6b02cd94942a5a0de6e18b10be274"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="15.8015801580158%" id="mcps1.1.6.1.2"><p id="acdcd659d46f24eac86378824c8ee463b"><a name="acdcd659d46f24eac86378824c8ee463b"></a><a name="acdcd659d46f24eac86378824c8ee463b"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="14.231423142314231%" id="mcps1.1.6.1.3"><p id="a9def453e9df6412bba79b8fff70869e8"><a name="a9def453e9df6412bba79b8fff70869e8"></a><a name="a9def453e9df6412bba79b8fff70869e8"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="9.400940094009401%" id="mcps1.1.6.1.4"><p id="a1e15f96e33ee48b9a0e14dbee0968f8a"><a name="a1e15f96e33ee48b9a0e14dbee0968f8a"></a><a name="a1e15f96e33ee48b9a0e14dbee0968f8a"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="39.35393539353936%" id="mcps1.1.6.1.5"><p id="a7168bff3ff0647d88967647f6ab26d5f"><a name="a7168bff3ff0647d88967647f6ab26d5f"></a><a name="a7168bff3ff0647d88967647f6ab26d5f"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="r32272055007144f79a2dfea8a786e589"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="afc75d8f275cc41089a4e4dc8a3fbee88"><a name="afc75d8f275cc41089a4e4dc8a3fbee88"></a><a name="afc75d8f275cc41089a4e4dc8a3fbee88"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="abf3cdb4352d94dbb96789b9920bff09e"><a name="abf3cdb4352d94dbb96789b9920bff09e"></a><a name="abf3cdb4352d94dbb96789b9920bff09e"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="a40a852f6f3624109acdb18b89f75be07"><a name="a40a852f6f3624109acdb18b89f75be07"></a><a name="a40a852f6f3624109acdb18b89f75be07"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="a61aed770cf534f06a236a689df6206e0"><a name="a61aed770cf534f06a236a689df6206e0"></a><a name="a61aed770cf534f06a236a689df6206e0"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="a745abab21c7c47afbb4343f611f13f0e"><a name="a745abab21c7c47afbb4343f611f13f0e"></a><a name="a745abab21c7c47afbb4343f611f13f0e"></a>Font color of the modified text.</p>
</td>
</tr>
<tr id="r9962b94a230e482a9cc74bbb784ea7a0"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="a50ed6c7dc89a419b8196eb32f4374eb9"><a name="a50ed6c7dc89a419b8196eb32f4374eb9"></a><a name="a50ed6c7dc89a419b8196eb32f4374eb9"></a>font-size</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="a3fef950f99bb45768f232285d9563d59"><a name="a3fef950f99bb45768f232285d9563d59"></a><a name="a3fef950f99bb45768f232285d9563d59"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="abf03dbbc119a4a158b410a3676fe71e6"><a name="abf03dbbc119a4a158b410a3676fe71e6"></a><a name="abf03dbbc119a4a158b410a3676fe71e6"></a>30px</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="a221074f45b48460a953a19ae07181768"><a name="a221074f45b48460a953a19ae07181768"></a><a name="a221074f45b48460a953a19ae07181768"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="a86d755d025194433a3d824ac6308dc19"><a name="a86d755d025194433a3d824ac6308dc19"></a><a name="a86d755d025194433a3d824ac6308dc19"></a>Font size of the modified text.</p>
</td>
</tr>
<tr id="row696318282019"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="p523512225579"><a name="p523512225579"></a><a name="p523512225579"></a>allow-scale</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="p923522212570"><a name="p923522212570"></a><a name="p923522212570"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="p11235322145714"><a name="p11235322145714"></a><a name="p11235322145714"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="p12235112285712"><a name="p12235112285712"></a><a name="p12235112285712"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="p1023513229570"><a name="p1023513229570"></a><a name="p1023513229570"></a>Whether the font size of the modified text changes with the system's font size settings.</p>
<div class="note" id="note5531128463"><a name="note5531128463"></a><a name="note5531128463"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p11531172814611"><a name="p11531172814611"></a><a name="p11531172814611"></a>If the <strong id="b9631151853613"><a name="b9631151853613"></a><a name="b9631151853613"></a>config-changes</strong> tag of <strong id="b15641171817360"><a name="b15641171817360"></a><a name="b15641171817360"></a>fontSize</strong> is configured for abilities in the <strong id="b20644418103618"><a name="b20644418103618"></a><a name="b20644418103618"></a>config.json</strong> file, the setting takes effect without application restart.</p>
</div></div>
</td>
</tr>
<tr id="rde507e70d93643ae8a6cb2d27c6acf99"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="ab1137579b73e4a38a6dbe7fe5d83e8e2"><a name="ab1137579b73e4a38a6dbe7fe5d83e8e2"></a><a name="ab1137579b73e4a38a6dbe7fe5d83e8e2"></a>font-style</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="ab7f6c9ddf05c44bda226d9bf186583eb"><a name="ab7f6c9ddf05c44bda226d9bf186583eb"></a><a name="ab7f6c9ddf05c44bda226d9bf186583eb"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="a763035129469427a9b607b50c93c046d"><a name="a763035129469427a9b607b50c93c046d"></a><a name="a763035129469427a9b607b50c93c046d"></a>normal</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="abdb1cd99a9c84f31b1bb21da686ded28"><a name="abdb1cd99a9c84f31b1bb21da686ded28"></a><a name="abdb1cd99a9c84f31b1bb21da686ded28"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="a04816275b7d249079b4a1e80f69ea86e"><a name="a04816275b7d249079b4a1e80f69ea86e"></a><a name="a04816275b7d249079b4a1e80f69ea86e"></a>Font style of the modified text. For details, see <a href="js-components-basic-text.md#section5775351116">font-style</a> of the <strong id="b18795152647"><a name="b18795152647"></a><a name="b18795152647"></a>text</strong> component.</p>
</td>
</tr>
<tr id="r41ee5629370e4317a0da49957e128ade"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="a380a51eccb244ea9a528c41348105934"><a name="a380a51eccb244ea9a528c41348105934"></a><a name="a380a51eccb244ea9a528c41348105934"></a>font-weight</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="a6998d5f15b9d47dfb5ea5d683f2945ef"><a name="a6998d5f15b9d47dfb5ea5d683f2945ef"></a><a name="a6998d5f15b9d47dfb5ea5d683f2945ef"></a>number | string</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="a9cd90194128142d6bf6a0279aa8d191e"><a name="a9cd90194128142d6bf6a0279aa8d191e"></a><a name="a9cd90194128142d6bf6a0279aa8d191e"></a>normal</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="a16edddde0d944b13a7a3567677cc913d"><a name="a16edddde0d944b13a7a3567677cc913d"></a><a name="a16edddde0d944b13a7a3567677cc913d"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="aa1d0d3abf811468e8c3f707e1a7e5b8c"><a name="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a><a name="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a>Font weight of the modified text. For details, see <a href="js-components-basic-text.md#section5775351116">font-weight</a> of the <strong id="b1695595210517"><a name="b1695595210517"></a><a name="b1695595210517"></a>text</strong> component.</p>
</td>
</tr>
<tr id="r8bf92fd80ab14f6a824003dcc7f3008c"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="ab4ed51f180194575856b899947e2c4d4"><a name="ab4ed51f180194575856b899947e2c4d4"></a><a name="ab4ed51f180194575856b899947e2c4d4"></a>text-decoration</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="ab4048c7eccf046bab1dbdd33a0739e42"><a name="ab4048c7eccf046bab1dbdd33a0739e42"></a><a name="ab4048c7eccf046bab1dbdd33a0739e42"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="a572fe437851c45b2a91c3748dbf3c0c3"><a name="a572fe437851c45b2a91c3748dbf3c0c3"></a><a name="a572fe437851c45b2a91c3748dbf3c0c3"></a>none</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="a4e2f6f648ebc4d6d947a3edb6efe22fb"><a name="a4e2f6f648ebc4d6d947a3edb6efe22fb"></a><a name="a4e2f6f648ebc4d6d947a3edb6efe22fb"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="aa83ac8481649423b80b326de4eb5fefb"><a name="aa83ac8481649423b80b326de4eb5fefb"></a><a name="aa83ac8481649423b80b326de4eb5fefb"></a>Text decoration of the modified text. For details, see <a href="js-components-basic-text.md#section5775351116">text-decoration</a> of the <strong id="b1528363213719"><a name="b1528363213719"></a><a name="b1528363213719"></a>text</strong> component.</p>
</td>
</tr>
<tr id="rc154005d2ebf483faffebbe0a509770d"><td class="cellrowborder" valign="top" width="21.21212121212121%" headers="mcps1.1.6.1.1 "><p id="a552bd7aa0bc94b118d88abf167e87a35"><a name="a552bd7aa0bc94b118d88abf167e87a35"></a><a name="a552bd7aa0bc94b118d88abf167e87a35"></a>font-family</p>
</td>
<td class="cellrowborder" valign="top" width="15.8015801580158%" headers="mcps1.1.6.1.2 "><p id="a0f5cc516346b4cbaa2d46c08bc340eeb"><a name="a0f5cc516346b4cbaa2d46c08bc340eeb"></a><a name="a0f5cc516346b4cbaa2d46c08bc340eeb"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="14.231423142314231%" headers="mcps1.1.6.1.3 "><p id="a959e67a1855241a1bb0898b2f57c7148"><a name="a959e67a1855241a1bb0898b2f57c7148"></a><a name="a959e67a1855241a1bb0898b2f57c7148"></a>sans-serif</p>
</td>
<td class="cellrowborder" valign="top" width="9.400940094009401%" headers="mcps1.1.6.1.4 "><p id="a2db078b3c8d64498af048fa12102a2a3"><a name="a2db078b3c8d64498af048fa12102a2a3"></a><a name="a2db078b3c8d64498af048fa12102a2a3"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="39.35393539353936%" headers="mcps1.1.6.1.5 "><p id="a52f159b549364d40b7c92d51aba7c1a9"><a name="a52f159b549364d40b7c92d51aba7c1a9"></a><a name="a52f159b549364d40b7c92d51aba7c1a9"></a>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 font specified by <a href="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>

## Events<a name="section1319514265813"></a>

Only the click event in  [Universal Events](js-components-common-events.md)  is supported.

## Method<a name="section2291124515582"></a>

Not supported

## Example Code<a name="section1841815550582"></a>

```
<!-- xxx.hml -->
<div class="container">
  <text class="title">
    <span class="spanTxt">span</span>
  </text>
</div>
```

```
/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 30px;
  text-align: center;
  width: 100%;
  height: 100px;
}
.spanTxt{
  color: chartreuse;
  font-size: 100px;
}
```

![](figures/en-us_image_0000001152588626.png)