HarmonyOS Text组件的文案过长时，会把右侧组件顶出屏幕

import measure from '@ohos.measure'  
import display from '@ohos.display'  
  
let displayClass: display.Display | null = null;  
let componentWidth:number = 0;  
try {  
  //获取屏幕宽度  
  displayClass = display.getDefaultDisplaySync();  
  componentWidth = displayClass.width  
  console.log('---这是componentWidth',componentWidth)  
} catch (exception) {  
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));  
}  
let messageText: string = '消息文本1111111111111111111111111111111111111111111111111111111111111111111111'  
let textWidth: number = measure.measureText({  
  textContent: messageText  
})  
let maxWidth = componentWidth * 0.8  
class MyColumnModifier implements AttributeModifier<ColumnAttribute> {  
  isDark: boolean = false  
  applyNormalAttribute(instance: ColumnAttribute): void {  
    if (textWidth > maxWidth) {  
      instance.layoutWeight(1)  
    } else {  
  
    }  
  }  
}  
@Entry  
@Component  
struct IR240428141936040 {  
  @State showMenu: boolean = false  
  // @State messageText: string = '消息文本11111111111111'  
  @State messageTopText: string = '引用消息文案'  
  @State modifier:MyColumnModifier = new MyColumnModifier()  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(20).margin({right: 20})  
        .id('top_icon')  
  
      Row() {  
        Image($r('app.media.app_icon')).width(20).id('left_icon')  
  
        /**  
         * '该区域的展示规则：'  
         * 1、单行可展示下时，左侧留白  
         * 2、单行展示不下时，自动换行  
         */  
        Column() {  
          // 单行展示  
          Text(this.messageTopText)  
            .fontSize(12).fontColor(Color.Gray)  
            .margin({bottom: 8})  
            .maxLines(1)  
            .textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)  
  
          Text(messageText)  
            .fontSize(15)  
        }  
        .backgroundColor(Color.Orange)  
        .alignItems(HorizontalAlign.Start)  
        .padding(5)  
        .attributeModifier(this.modifier)  
  
        Image($r('app.media.app_icon')).width(20).id('right_icon')  
      }.alignItems(VerticalAlign.Bottom)  
      .justifyContent(FlexAlign.End)  
      .width('100%')  
  
      Text('底部文案')  
        .fontSize(12)  
        .margin({right: 20})  
    }.width('100%')  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.End)  
    .alignItems(HorizontalAlign.End)  
    .padding({left: 20})  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.

const RIGHT_ICON_WIDTH = 20  
  
@Entry  
@Component  
struct Index {  
  @State showMenu: boolean = false  
  @State messageText: string = '消息文本11111111111111111111111111111111111111111111111111111111111111111111111111111111'  
  @State messageTopText: string = '引用消息文案'  
  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(20).margin({right: RIGHT_ICON_WIDTH})  
        .id('top_icon')  
  
      Row() {  
        Image($r('app.media.app_icon')).width(20).id('left_icon')  
  
        /**  
         * '该区域的展示规则：'  
         * 1、单行可展示下时，左侧留白  
         * 2、单行展示不下时，自动换行  
         */  
        Column() {  
          // 单行展示  
          Text(this.messageTopText)  
            .fontSize(12).fontColor(Color.Gray)  
            .margin({bottom: 8})  
            .maxLines(1)  
            .textOverflow({overflow: TextOverflow.Ellipsis}).ellipsisMode(EllipsisMode.END)  
  
          Text(this.messageText)  
            .fontSize(15)  
        }.backgroundColor(Color.Orange)  
        .alignItems(HorizontalAlign.Start)  
        .padding(5)  
        .margin({right: 20})  
        .constraintSize({maxWidth: 300})  
  
        Image($r('app.media.app_icon')).width(20).id('right_icon')  
      }.alignItems(VerticalAlign.Bottom)  
      .justifyContent(FlexAlign.End)  
      // .width('100%')  
  
      Text('底部文案')  
        .fontSize(12)  
        .margin({right: RIGHT_ICON_WIDTH})  
    }.width('100%')  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.End)  
    .alignItems(HorizontalAlign.End)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.