HarmonyOS鸿蒙Next中Text设置超出内容...

HarmonyOS鸿蒙Next中Text设置超出内容… cke_145.png

这里内容已经超过3行了,但是没有显示出…

cke_4569.png


更多关于HarmonyOS鸿蒙Next中Text设置超出内容...的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题原因分析

您的代码中设置了.maxLines(3)和.ellipsisMode(EllipsisMode.END)，但未设置textOverflow属性。ellipsisMode属性必须与textOverflow属性配合使用（且textOverflow需设置为TextOverflow.Ellipsis），单独设置ellipsisMode或maxLines不会生效。

解决方案

在您的Text组件中添加.textOverflow({overflow: TextOverflow.Ellipsis})属性，以确保文本超长时显示省略号。修改后的代码示例：

Text('121111111111111111111111111111111111111111111111111111111111111111111111')
  .fontSize(14)
  .fontWeight(350)
  .maxLines(3)
  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 必须添加此设置
  .ellipsisMode(EllipsisMode.END)
  .fontColor('#3D3D3D')
  .margin({ top: 5, left: 19, right: 17 })
  .alignRules({
    top: { anchor: 'text_top', align: VerticalAlign.Bottom },
    left: { anchor: '_container_', align: HorizontalAlign.Start }
  })

注意事项

  • 如果未设置textOverflow或设置为其他值（如TextOverflow.None或TextOverflow.Clip），文本超长时只会截断而不会显示省略号。

更多关于HarmonyOS鸿蒙Next中Text设置超出内容...的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


背景知识：

楼主，Text的属性 .ellipsisMode(EllipsisMode.END) 和 .textOverflow({overflow:TextOverflow.Ellipsis}) 是要配合一起使用的，你漏了 .textOverflow({overflow:TextOverflow.Ellipsis})属性。

问题解决：

代码如下：

Text("1111111111111111111111111111111111111111111111122222222222222222222222222222222222223333333333333344444444444444444444444444444444444444444")
  .fontSize(14)
  .fontColor(Color.Black)
  .fontWeight(350)
  .ellipsisMode(EllipsisMode.END)
  .textAlign(TextAlign.Center)
  .maxLines(3)
  .margin({ top: 5, left: 19, right: 17 })
  .textOverflow({overflow:TextOverflow.Ellipsis})

真机演示：

cke_9602.png

maxLines：必须设置最大行数，如 .maxLines(1) 限制为1行

textoverflow：设置为 TextOverflow.Ellipsis，表示超出部分显示省略号

ellipsisMode：用于指定省略号位置，如 .ellipsisMode(EllipsisMode.END) 表示尾部省略

示例：

@Entry
@Component
struct A{
  build() {
    Column(){
      Text('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111')
        .maxLines(1)
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .ellipsisMode(EllipsisMode.END)
        .width(100)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

cke_3992.png

在HarmonyOS鸿蒙Next中，Text组件内容超出时可通过设置textOverflow属性控制显示方式，例如使用Ellipsis实现省略号截断。结合maxLines限制行数，超出部分自动隐藏。支持属性包括Clip（直接裁剪）、Ellipsis（省略号）和None（默认显示）。需在布局中明确宽度或约束条件以确保溢出效果生效。

在HarmonyOS Next中，如果Text组件内容超出显示范围且未展示省略号，可以通过设置maxLines和ellipsis属性来控制文本行数并启用省略效果。例如：

<Text
    maxLines="3"
    ellipsis="true"
    text="您的长文本内容..."
/>

确保布局容器宽度足够，或结合layoutWeight等属性调整文本区域大小。如果仍无法解决，检查父组件约束是否限制了文本显示空间。

回到顶部