The textCase property enforces consistent capitalization of text content, regardless of the original string.

@Entry
@Component
struct TextCaseExample {
  build() {
    Column() {
      Text("Original Text")
        .textCase(TextCase.UpperCase)
        .padding(10)
        .border({ width: 1 })
      Text("Original Text")
        .textCase(TextCase.LowerCase)
        .padding(10)
        .border({ width: 1 })
      Text("Original Text")
        .textCase(TextCase.Normal)
        .padding(10)
        .border({ width: 1 })
    }
    .width('100%')
    .height('100%')
  }
}

Text Alignment

Use textAlign to control horizontal positioning within the text container.

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

Text Overflow Handling

When content exceeds container bounds, textOverflow combined with maxLines defines how to truncate or display the overflow.

@Entry
@Component
struct TextOverflowExample {
  build() {
    Column() {
      Text("This is a very long text string that will not be truncated")
        .width(250)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.None })
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
      Text("This is a very long text string that will be truncated")
        .width(250)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

Line Height Control

lineHeight adjusts the vertical spacing between lines of text, useful for improving readability.

@Entry
@Component
struct LineHeightExample {
  build() {
    Column() {
      Text("Standard line height text. This line uses default spacing.")
        .width(300)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
      Text("Increased line height text. This line has custom vertical spacing.")
        .width(300)
        .fontSize(12)
        .lineHeight(24)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

Text Decorations

Add visual emphasis using strikethrough, underline, or overline with customizable colors.

@Entry
@Component
struct TextDecorationExample {
  build() {
    Column() {
      Text("Strikethrough text")
        .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        .padding(10)
        .borderWidth(1)
      Text("Underlined text")
        .decoration({ type: TextDecorationType.Underline, color: Color.Red })
        .padding(10)
        .borderWidth(1)
      Text("Overlined text")
        .decoration({ type: TextDecorationType.Overline, color: Color.Red })
        .padding(10)
        .borderWidth(1)
    }
    .width('100%')
    .height('100%')
  }
}

Baseline Offset

baselineOffset shifts the vertical position of text relative to its parent’s baseline, accepting pixel or percentage values.

@Entry
@Component
struct BaselineOffsetExample {
  build() {
    Column() {
      Text("Baseline at 0")
        .baselineOffset(0)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
      Text("Raised by 20px")
        .baselineOffset(20)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
      Text("Lowered by 15px")
        .baselineOffset(-15)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

Letter Spacing

Adjust the horizontal space between characters using letterSpacing. Positive values expand, negative values compress.

@Entry
@Component
struct LetterSpacingExample {
  build() {
    Column() {
      Text("Normal spacing")
        .letterSpacing(0)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
      Text("Expanded spacing")
        .letterSpacing(4)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
      Text("Condensed spacing")
        .letterSpacing(-1)
        .fontSize(14)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

Dynamic Font Sizing

minFontSize and maxFontSize constrain the automatic scaling of text within a container, ideal for responsive layouts.

@Entry
@Component
struct DynamicFontSizeExample {
  build() {
    Column() {
      Text("Limited range: 5–30pt, single line")
        .width(250)
        .maxLines(1)
        .minFontSize(5)
        .maxFontSize(30)
        .border({ width: 1 })
        .padding(10)
      Text("Limited range: 15–30pt, two lines")
        .width(250)
        .maxLines(2)
        .minFontSize(15)
        .maxFontSize(30)
        .border({ width: 1 })
        .padding(10)
      Text("Fixed height: 50px, min 15pt, max 30pt")
        .width(250)
        .height(50)
        .minFontSize(15)
        .maxFontSize(30)
        .border({ width: 1 })
        .padding(10)
    }
    .width('100%')
    .height('100%')
  }
}

Copy Behavior Control

Enable or restrict text selection and copying via copyOption.

@Entry
@Component
struct CopyOptionExample {
  build() {
    Column() {
      Text("This text can be copied within the app")
        .fontSize(16)
        .copyOption(CopyOptions.InApp)
    }
    .width('100%')
    .height('100%')
  }
}

Event Handling

Attach click handlers directly to text components for interactive behavior.

@Entry
@Component
struct ClickableText {
  build() {
    Column() {
      Text("Tap me")
        .onClick(() => {
          console.info('Text clicked!');
        })
        .padding(15)
        .border({ width: 1 })
    }
    .width('100%')
    .height('100%')
  }
}

Reeal-World Example: Trending Topic List

Construct a dynamic trending topics UI with badges, ellipsis truncation, and layout constraints.

@Entry
@Component
struct TrendingTopics {
  build() {
    Column() {
      Row() {
        Text("1")
          .fontSize(14)
          .fontColor(Color.Red)
          .margin({ left: 10, right: 10 })
        Text("Top Trending Topic Here")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
        Text("Hot")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(Color.fromRgb(119, 1, 0))
          .borderRadius(5)
          .width(15)
          .height(14)
      }
      .width('100%')
      .margin(5)

      Row() {
        Text("2")
          .fontSize(14)
          .fontColor(Color.Red)
          .margin({ left: 10, right: 10 })
        Text("Another Very Long Trending Topic That Needs Truncation")
          .fontSize(12)
          .fontColor(Color.Blue)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(300)
          .constraintSize({ maxWidth: 200 })
        Text("New")
          .margin({ left: 6 })
          .textAlign(TextAlign.Center)
          .fontSize(10)
          .fontColor(Color.White)
          .fontWeight(600)
          .backgroundColor(Color.fromRgb(0, 120, 215))
          .borderRadius(5)
          .width(15)
          .height(14)
      }
      .width('100%')
      .margin(5)
    }
    .width('100%')
    .height('100%')
  }
}