在HarmonyOS NEXT开发中在Flex中有多个Text时，如何实现压缩某个Text的宽度？

Question

在HarmonyOS NEXT开发中在Flex中有多个Text时，如何实现压缩某个Text的宽度？

Answer 1

可以使用flexShrink属性，配合textOverflow、wordBreak、maxLines，实现压缩Text的宽度和内容：

@Entry 
@Component 
struct AdaptiveText { 
  build() { 
    Flex({ direction: FlexDirection.Row }) { 
      Text('flexShrink(2)flexShrink(2)flexShrink(2)') 
        .flexShrink(2) 
        .width(200) 
        .height(100) 
        .backgroundColor(0xF5DEB3) 
        .textOverflow({ overflow: TextOverflow.Ellipsis }) 
        .wordBreak(WordBreak.BREAK_WORD) 
        .maxLines(2) 
 
      Text('no flexShrink') 
        .width(200) 
        .height(100) 
        .backgroundColor(0xD2B48C) 
        .textOverflow({ overflow: TextOverflow.Ellipsis }) 
        .wordBreak(WordBreak.BREAK_WORD) 
        .maxLines(2) 
 
      Text('flexShrink(6)flexShrink(6)flexShrink(6)') 
        .flexShrink(6) 
        .width(200) 
        .height(100) 
        .backgroundColor(0xF5DEB3) 
        .textOverflow({ overflow: TextOverflow.Ellipsis }) 
        .wordBreak(WordBreak.BREAK_WORD) 
        .maxLines(2) 
    }.width("100%").height(120).padding(10).backgroundColor(0xAFEEEE) 
  } 
}