如何解决Text组件文本为内容中文、数字、英文混合时显示省略号截断异常？

Question

如题：如何解决Text组件文本为内容中文、数字、英文混合时显示省略号截断异常？

Answer 1

问题场景：

在使用text文本组件时，若text组件中文本为内容中文、数字、英文混合时，TextOverFlow设置文本超长时显示省略号出现截断异常。

参考答复：

text组件设置wordBreak(WordBreak.BREAK\_ALL)属性时，对于Non-CJK的文本，可在任意2个字符间断行即可正常截断。

参考代码：

@Entry
@Component
struct Index {
  @State text: string = '2年·VIP会员 3个月期·8GB·230mm·花漾粉'

  build() {
    Column() {
      Text(this.text)
        .width(200)//设置最大行数
        .maxLines(1)//文本超长显示
        .textOverflow({ overflow: TextOverflow.Ellipsis })//文本超长显示省略号
        .ellipsisMode(EllipsisMode.END)//设置断行规则WordBreak.BREAK_ALL后
        .wordBreak(WordBreak.BREAK_ALL)
        .textAlign(TextAlign.JUSTIFY)
        .backgroundColor(Color.Green)
        .fontSize(16)
        .fontColor(Color.Red)
    }
  }
}