鸿蒙Next中如何实现row一行显示并超出显示省略号

在鸿蒙Next开发中，我想实现一个Row组件内的内容在一行显示，如果内容超出容器宽度则自动显示省略号（…）。目前尝试了设置width('100%')和textOverflow({ overflow: TextOverflow.Ellipsis })，但超出部分直接换行了。请问正确的属性组合是什么？是否需要配合Flex布局或其他限制条件？

2 回复

在鸿蒙Next中，用Row组件配合Text的maxLines(1)和ellipsis属性，轻松实现单行显示，超长就变省略号。代码示例：

Row() {
  Text("超长文本超长文本...")
    .maxLines(1)
    .ellipsis(true)
}

搞定！

更多关于鸿蒙Next中如何实现row一行显示并超出显示省略号的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Row组件结合Flex布局和Text组件的textOverflow属性实现一行显示，超出部分显示省略号。

核心实现步骤：

  1. 使用Row组件作为容器
  2. 设置justifyContent: FlexAlign.Start让内容从左对齐
  3. 为Text组件设置：
    • maxLines: 1（限制单行显示）
    • textOverflow: { overflow: TextOverflow.Ellipsis }（超出显示省略号）
    • flexShrink: 1（允许文本收缩）

示例代码：

import { Row, Text, FlexAlign, TextOverflow } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Text('这是一个很长的文本内容，当超出容器宽度时会显示省略号...')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .flexShrink(1)
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }
}

关键属性说明：

  • maxLines: 1：限制文本最多显示1行
  • textOverflow：设置溢出效果，Ellipsis表示省略号
  • flexShrink: 1：确保文本在空间不足时能够收缩
  • justifyContent: FlexAlign.Start：保持内容左对齐

这样配置后，当文本内容超出Row容器宽度时，会自动截断并在末尾显示"…"省略号。

回到顶部