Flex layout text is not fully displayed when it automatically wraps

Read the original article：Flex layout text is not fully displayed when it automatically wraps

Problem Description

In the following code, when the Flex layout uses alignItems: ItemAlign.Stretch for stretching and clip for cropping, some characters will be cropped and not fully displayed.

@Entry
@Component
struct Index {
  @State text: string = '1234567890123456789012345678901234567890123456789012345678901234567890123344';

  build() {
    Column() {
      Column() {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Stretch }) {
          Column() {
            Text('xxxx')
          }
          .width(96)
          .flexShrink(0)

          Column() {
            Text('yyyy')
            Text('yyyy')
            Text(this.text)
          }
          .flexGrow(1)
          .flexShrink(1)
          .padding(10)
          .borderWidth(1)
          .alignItems(HorizontalAlign.Start)
        }.width('90%')
        .border({
          width: 1,
          color: '#000000'
        })
      }.height('auto').clip(true)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text(this.text)
      }.padding(12)
    }
  }
}

The following is an image showing incomplete characters.

Background Knowledge

Adding the alignSelf property to the components in the Flex container can set the alignment format of the child component on the cross axis of the parent container. The alignment format of all child components on the cross axis of the Flex container is satisfied through the alignItems property.

Solution

You can add the alignSelf property to the Column component in the Flex container. The alignment format of the Text child component on the cross axis of the Column parent component will override its alignItems setting, so that the text content in the Text child component can be fully displayed. Sample code:

@Entry
@Component
struct Index {
  @State text: string = '1234567890123456789012345678901234567890123456789012345678901234567890123344';

  build() {
    Column() {
      Column() {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Stretch }) {
          Column() {
            Text('xxxx')
          }
          .width(96)
          .flexShrink(0)

          Column() {
            Text('yyyy')
            Text('yyyy')
            Text(this.text)
          }
          .flexGrow(1)
          .flexShrink(1)
          .padding(10)
          .borderWidth(1)
          .alignItems(HorizontalAlign.Start)
          .alignSelf(ItemAlign.Start)
        }.width('90%')
        .border({
          width: 1,
          color: '#000000'
        })
      }.height('auto').clip(true)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text(this.text)
      }.padding(12)
    }
  }
}

Effect preview:

Written by Mucahid Kincir