text

The <text> component is used to display a piece of textual information.

NOTE:

• The text content must be written in the content area.

Required Permissions

None

Child Component

<span> is supported.

Attributes

Attributes in Universal Attributes are supported.

Styles

In addition to the styles in Universal Styles, the following styles are supported.

NOTE:

• In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement.
• Use the escape character \r\n for newline.
• The following escape characters are supported: \a, \b, \f, \n, \r, \t, \v, ', ", and \0.
• When you use <span> as a child component to form a text paragraph, note that if a <span> style is abnormal, the text paragraph cannot be displayed.
• The letter-spacing, text-align, line-height, text-overflow, and max-lines styles take effect on text content held by the <text> component and its child components (<span>).
• The <text> component does not support the coexistence of the text content and <span> subcomponents. (If both of them exist, only the content in <span> is displayed.)

Events

Events in Universal Events are supported.

Method

Methods in Universal Methods are supported.

Example Code

<!-- xxx.hml -->
<div class="container">
  <div class="content">
    <text class="title">
      Hello {{ title }}
    </text>
  </div>
</div>
/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content{
  width: 400px;
  height: 400px;
  border: 20px;
}
.title {
  font-size: 80px;
  text-align: center;
  width: 400px;
  height: 400px;
}
// xxx.js
export default {
  data: {
    title: 'World'
  }
}

<!-- xxx.hml -->
<div class="container">
  <text class="text1">
    This is a passage
  </text>
  <text class="text2">
    This is a passage
  </text>
</div>
/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  background-color: #F1F3F5;
  justify-content: center;
}
.text1{
  word-spacing: 10px;
  adapt-height: true;
}
.text2{
  width: 200px;
  max-lines: 1;
  text-overflow: ellipsis;
  text-valign: middle;
  line-height: 40px;
  text-decoration: underline;
  text-decoration-color: red;
  text-indent: 20px;
  white-space: pre;
}