HarmonyOS 鸿蒙Next TextAlign.JUSTIFY单行不生效及letterSpacing中英文混搭英文字符间距问题如何解决

HarmonyOS 鸿蒙Next TextAlign.JUSTIFY单行不生效及letterSpacing中英文混搭英文字符间距问题如何解决

1. TextAlign.JUSTIFY,只有一行的时候不生效 2. letterSpacing,当字符串里中英文混搭的时候,英文字符只有半个。  如何解决上面2个问题

2 回复

1.当textAlign属性设置为TextAlign.JUSTIFY时,最后一行文本不参与两端对齐,为水平对齐首部效果。参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#textalign

如有需要,可以单独设置需要对齐的那行数据。

2.当letterSpacing的值设置为百分比时,按默认值显示。设置为0时,按默认值显示。当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。推荐使用值为正数。英文字符显示异常,可能是由于字符间距设置不当。确保在设置letterSpacing时,考虑到英文字符的平均宽度,避免字符间距过小导致显示问题。参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#letterspacing

参考demo:

@Entry

@Component

struct Index {

  @State message: string = '只有一行的时候不生效。当字符串里中英文混搭的时候,英文字符只有半个。';

  @State message2: string = '当字符串里中英文混搭的时候,letterSpacing英文字符只有半个。';

  build() {

    Column(){

      Row(){

        Text(this.message)

          .width('50%')

          .fontSize(20)

          .textAlign(TextAlign.JUSTIFY)

      }

      Row(){

        Text('单')

          .fontSize(20)

        Text('独')

          .fontSize(20)

        Text('一')

          .fontSize(20)

        Text('行')

          .fontSize(20)

      }

      .width('50%')

      .justifyContent(FlexAlign.SpaceBetween)

      Divider().color('#EE6363').strokeWidth(10).margin(20)

      Row(){

        Text(this.message2)

          .width('100%')

          .fontSize(20)

          .letterSpacing(1)

      }

    }

    .width('100%')

    .height('100%')

  }

}

更多关于HarmonyOS 鸿蒙Next TextAlign.JUSTIFY单行不生效及letterSpacing中英文混搭英文字符间距问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next中TextAlign.JUSTIFY单行不生效及letterSpacing中英文混搭英文字符间距问题,以下是解决方案:

对于TextAlign.JUSTIFY单行不生效的问题:

  • 尝试使用text-align-last: justify;属性,它不会增加元素高度。
  • 或者,通过添加伪元素的方式,但需注意这可能会导致高度增加,此时可以给父元素设置固定高度。

对于letterSpacing中英文混搭英文字符间距问题:

  • letterSpacing属性会同时影响中英文字符的间距,设置时需谨慎。
  • 若中英文混搭时英文字符间距不理想,可尝试自定义TextLayout,更精确地控制文本布局和间距。
  • 另外,调整字体和字号,或者适当添加空格或不可见字符(如零宽空格),也可手动调整文本间距。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部