HarmonyOS Span在一行后面会自动换行，希望自动切换成两行，span不要分开？

Question

如题：HarmonyOS Span在一行后面会自动换行，希望自动切换成两行，span不要分开？

Answer 1

参考示例：

import measure from '@ohos.measure';
import display from '@ohos.display';

@Entry
@Component
export struct Index5 {
  @State msg: string =
    '阿萨德考虑好家伙阿萨德了就好了静安寺打回到了家阿萨德了了三大流口水';
  @State msg2: string = `了解详情`;
  @State textWidth: number = display.getDefaultDisplaySync().width - vp2px(60);

  build() {
    NavDestination() {
      Column() {
        TextInput().width('100%')
          .onChange((text)=>{
            this.msg = text
          })
        Row() {
          Text() {

            Span(this.msg).fontColor(Color.Blue).fontSize(14) //fontSize 21px 满一行为630px 126为第二个标签所占的宽度
            if (this.changeLine(this.msg, this.msg2)) {
              Span('\n')
            }
            Span(this.msg2).fontColor(Color.Pink).fontSize(14)
            ImageSpan($r('app.media.app_icon')).width(12)
          }.textAlign(TextAlign.Start).width('100%').padding({ left: 12, right: 12 }).backgroundColor('#ff76a225')
        }.width('100%').padding({ left: 18, right: 18 }).height(200)
      }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    }
  }

  changeLine(msg1: string, msg2: string): boolean {
    let i: number = 0;
    let j: number = 0;
    while (j < msg1.length) {
      j++;
      if (this.getTextWidth(msg1.substring(i, j), 14) > this.textWidth) {
        i = j - 1;
      }
    }
    return this.getTextWidth(msg1.substring(i), 14) + this.getTextWidth(msg2, 14) + vp2px(12) > this.textWidth
  }

  getTextWidth(content: string, fontSize: number): number {
    const width = measure.measureText({ textContent: content, fontSize: fontSize })
    console.error(`getTextWidth: content: ${content}, width: ${width}`)
    return width;
  }
}