HarmonyOS Text组件溢出时会导致文字和省略号重叠？

Question

代码如下：

Row() {
  Text("主标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
    .padding({right: 20}).maxLines(1).constraintSize({maxWidth: "100%"})
    .textOverflow({overflow: TextOverflow.Ellipsis})
  Text("副标题xxxxxxxxxx")
    .textOverflow({overflow: TextOverflow.Ellipsis})
    .maxLines(1)
    .layoutWeight(1)
}

Answer 1

使用flex布局，副标题组件设置默认flex空间占位大小，flexBasis；再让组件可以扩充flexGrow参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5\#flexgrow

Flex({}){
  Text("主标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxsdgdsgfsdfgsdgsdfgsdfgsd")
    .maxLines(1)
    .textOverflow({overflow: TextOverflow.Ellipsis})

  Text("副标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxsdgdsgfsdfgsdgsdfgsdfgsd")
    .textOverflow({overflow: TextOverflow.Ellipsis})
    .maxLines(1)
    .flexBasis(40)
    .flexGrow(1)
}