In HarmonyOS ArkUI, the Text component serves as a container for displaying text content, while the Span component allows for styling specific portions of text within a Text container. The key distinction is that Text provides the overall container and layout properties, whereas Span enables granular text formatting within that container.

Text Container with Span Elements

struct TextExample {
  build() {
    Column() {
      Text('Primary Text') {
        Span('Styled Segment')
      }
      .padding(10)
      .borderWidth(1)
    }
    .width('100%')
    .height('100%')
  }
}

Text Decoration Styles

The decoration property applies visual effects to text segments with these options:

• Underline: Bottom line decoration
• LineThrough: Strike-through effect
• Overline: Top line decoration

@Entry
@Component
struct DecoratedText {
  build() {
    Column() {
      Text() {
        Span('First Segment').fontSize(16).fontColor(Color.Gray)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        Span('Second Segment').fontColor(Color.Blue).fontSize(16)
          .fontStyle(FontStyle.Italic)
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })
        Span('Third Segment').fontSize(16).fontColor(Color.Gray)
          .decoration({ type: TextDecorationType.Overline, color: Color.Green })
      }
      .borderWidth(1)
      .padding(10)
    }
    .width('100%').height('100%')
  }
}

Text Transformation

The textCase property controls text case transformation:

@Entry
@Component
struct CaseExample {
  build() {
    Column() {
      Text() {
        Span('Transformed Text').fontSize(12)
          .textCase(TextCase.UpperCase).onClick(() => {
            console.log('Span click event triggered')
          })
      }
      .borderWidth(1)
      .padding(10)
    }
    .width('100%').height('100%')
  }
}

Text Alignment

The textAlign property controls horizontal text alignment within containers:

@Entry
@Component
struct AlignmentExample {
  build() {
    Column() {
      Text('Left Aligned')
        .width(300)
        .textAlign(TextAlign.Start)
        .border({ width: 1 })
        .padding(10)
      Text('Center Aligned')
        .width(300)
        .textAlign(TextAlign.Center)
        .border({ width: 1 })
        .padding(10)
      Text('Right Aligned')
        .width(300)
        .textAlign(TextAlign.End)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%').height('100%')
  }
}

Text Overflow Handling

The textOverflow property manages text that exceeds container boundaries, requiring maxLines configuration:

@Entry
@Component
struct OverflowExample {
  build() {
    Column() {
      Text('Long text content that exceeds container width and requires overflow handling mechanisms')
        .width(250)
        .textOverflow({ overflow: TextOverflow.None })
        .maxLines(1)
        .fontSize(12)
        .border({ width: 1 }).padding(10)
      Text('Extended text content demonstrating ellipsis behavior for overflow conditions')
        .width(250)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .fontSize(12)
        .border({ width: 1 }).padding(10)
    }
    .width('100%').height('100%')
  }
}

Line Height Configuration

The lineHeight property adjusts vertical spacing beetween text lines:

@Entry
@Component
struct LineHeightExample {
  build() {
    Column() {
      Text('Standard line height text content example for comparison purposes')
        .width(300).fontSize(12).border({ width: 1 }).padding(10)
      Text('Modified line height text content demonstrating spacing adjustment')
        .width(300).fontSize(12).border({ width: 1 }).padding(10)
        .lineHeight(20)
    }
    .width('100%').height('100%')
  }
}

Baseline Offset Adjustment

The baselineOffset property vertically shifts text relative to its container's baseline:

@Entry
@Component
struct BaselineExample {
  build() {
    Column() {
      Text('Default baseline positioning reference text')
        .baselineOffset(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('Positive baseline offset demonstration text')
        .baselineOffset(30)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('Negative baseline offset example text')
        .baselineOffset(-20)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
    }
    .width('100%').height('100%')
  }
}

Letter Spacing Control

The letterSpacing property adjusts horizontal spacing between characters:

@Entry
@Component
struct SpacingExample {
  build() {
    Column() {
      Text('Default character spacing text example')
        .letterSpacing(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('Increased letter spacing demonstration')
        .letterSpacing(3)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
      Text('Reduced character spacing example text')
        .letterSpacing(-1)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .margin(5)
    }
    .width('100%').height('100%')
  }
}

Dynamic Font Sizing

The minFontSize and maxFontSize properties constrain text scaling within specified boundaries:

@Entry
@Component
struct FontSizeExample {
  build() {
    Column() {
      Text('Constrained text with size limits applied to single line layout')
        .width(250)
        .maxLines(1)
        .maxFontSize(30)
        .minFontSize(5)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
      Text('Size-limited text content within two-line container configuration')
        .width(250)
        .maxLines(2)
        .maxFontSize(30)
        .minFontSize(5)
        .border({ width: 1 })
        .padding(10)
        .margin(5)
    }
    .width('100%').height('100%')
  }
}

Text Copy Configuration

The copyOption property controls teext selection and copying behavior:

@Entry
@Component
struct CopyExample {
  build() {
    Column() {
      Text("Selectable text content with copy functionality")
        .fontSize(30)
        .copyOption(CopyOptions.InApp)
    }
    .width('100%').height('100%')
  }
}

Event Handling

Text components support various interaction events:

@Entry
@Component
struct EventExample {
  build() {
    Column() {
      Text('Interactive Text Element')
        .onClick(() => {
          console.log('Text component click event registered');
        })
    }
    .width('100%').height('100%')
  }
}