span

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

As a child component of <text>, the <span> component is used as a text modifier.

Required Permissions

None

Child Components

Not supported

Attributes

The universal attributes are supported.

NOTE

The focusable and disabled attributes are not supported.

Styles

Only the following styles are supported.

Name	Type	Default Value	Mandatory	Description
color	<color>	-	No	Font color of the modified text.
font-size	<length>	30px	No	Font size of the modified text.
allow-scale	boolean	true	No	Whether the font size of the modified text changes with the system's font size settings. If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
font-style	string	normal	No	Font style of the modified text. For details, see font-style of the <text> component.
font-weight	number \|string	normal	No	Font weight of the modified text. For details, see font-weight of the <text> component.
text-decoration	string	none	No	Text decoration of the modified text. For details, see text-decoration of the <text> component.
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 is used for the text.

Events

Only the click event in Universal Events is supported.

Methods

Not supported

Example

<!-- 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: 80px;
}

en-us_image_0000001152588626