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

2024-12-18 15:54:02
120次阅读
0个评论

文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。

从API version 11开始,建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断,示例代码如下:


@Entry
@Component
struct TextMixException {
  @State text: string = '2年·VIP会员 3个月期·8GB·230mm·商品颜色';

  build() {
    RelativeContainer() {
      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)
    }
    .height('100%')
    .width('100%')
  }
}
收藏00

登录 后评论。没有帐号? 注册 一个。