Span中英文混用文本会自动换行

Question

在开发时遇到Text和Span嵌套使用时，如果Span里面的的文本是中英文混合的场景，会出现中文之后有多余留白，文本布局上看起来不够美观，有什么办法可以解决吗？

下面是我写的最小化示例：

@Entry
@Component
struct Index {
  @State str: string = 'Hello World！【啦啦啦】';

  build() {
    Row() {
      Column() {
        Text(){
          Span(this.str)
        }
          .width(200)
          .height(100)
          .borderWidth(1)
          .fontSize(20)
      }
      .width('100%')
    }
    .height('100%')
  }
}

自定义标签：HarmonyOS NEXT；OpenHarmony；ArkUI；Text；Span

Answer 1

尝试了下，可以通过Text组件的WordBreak属性去实现效果

Text(){
    Span(this.str)
  }
  .margin(10)
  .width(200)
  .height(100)
  .borderWidth(1)
  .fontSize(20)
  .wordBreak(WordBreak.BREAK_ALL)

WordBreak属性参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#wordbreak11