HarmonyOS 鸿蒙Next space会导致文本溢出错误

HarmonyOS 鸿蒙Next space会导致文本溢出错误，给row中添加space会导致文本溢出的时候边界判定出错，内容区域直接超出边界，space不会直接用offset这种位移来实现的吧?

@Entry
@Component
struct Index {
  @State message: string = '测试测试测试测试测试测试测试测试测试';

  build() {
    Column() {
      Row({ space: 10 }) {
        Row({ space: 20 }) {
          Image($r('app.media.app_icon')).width(20).height(20)
          Text(this.message).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .borderWidth(1)
        .borderRadius(20)
        .padding({
          left: 10,
          right: 10,
          top: 5,
          bottom: 5
        })
        .constraintSize({ maxWidth: '50%' })

        Row() {
          Image($r('app.media.app_icon')).width(20).height(20)
          Text(this.message).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .borderWidth(1)
        .borderRadius(20)
        .padding({
          left: 10,
          right: 10,
          top: 5,
          bottom: 5
        })
        .constraintSize({ maxWidth: '50%' })
      }
    }.justifyContent(FlexAlign.Center).padding({ left: 16, right: 16 }).width('100%').height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next space会导致文本溢出错误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼•2 个月前

可以给Text设置宽度，或者设置flexBasis为100，参考文档和实例链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5#flexbasis

Row({space: 20}) {
          Image($r('app.media.app_icon'))
            .width(20)
            .height(20)
          Text(this.message)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .width("35%")
            // .flexBasis(100)
        }

更多关于HarmonyOS 鸿蒙Next space会导致文本溢出错误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•2 个月前

HarmonyOS 鸿蒙Next space在处理文本显示时，其布局管理系统通常会自动调整文本以适应容器的大小，避免文本溢出。然而，在某些特定情况下，如自定义布局或特殊控件的使用中，可能会遇到文本溢出错误。

这类问题往往源于布局参数的错误设置或控件属性的不匹配。例如，当文本控件的宽度被固定而内容过长时，或者当布局未正确设置换行或滚动属性时，都可能引发文本溢出。

要解决这个问题，可以检查以下几个方面：

确保文本控件的宽度足够容纳其内容，或设置为可滚动。
在布局文件中正确设置换行属性，如android:singleLine="false"（注意，此处使用的是Android属性示例，鸿蒙系统中对应属性可能有所不同，需查阅鸿蒙开发文档）。
对于自定义控件或复杂布局，检查其内部逻辑是否正确处理了文本显示和换行。

此外，鸿蒙系统提供了丰富的布局和控件属性，用于精确控制文本显示，开发者应充分利用这些属性来避免文本溢出错误。

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