span

The <span> child component of <text> is used as a text modifier.

Required Permissions

None

Child Components

The <span> child component is supported.

Attributes

Attributes in Universal Attributes are supported.

img NOTE: The focusable and disabled attributes are not supported.

Styles

Only the following style attributes 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.
NOTE:
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 font specified by Custom Font Styles is used for the text.

Events

Only the click event in Universal Events is supported.

Method

Not supported

Example Code

<!-- 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;
}

img