ArkUI Text：长文别一股脑砸到用户脸上

今天我们把长文本收一收，让页面先给用户一个能扫读的摘要，而不是把整段内容直接铺满屏幕。

这个 Demo 只做一件事：用 maxLines、textOverflow 和 ellipsisMode 控制长文展示，再用一个很小的状态切换“展开 / 收起”。状态这里只是为了让按钮能动起来，我们不在这篇展开讲状态管理。

先做两行摘要

长文最常见的处理方式，是先限制行数：

Text(this.articleText)
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

maxLines(2) 负责收住高度，TextOverflow.Ellipsis 负责在内容溢出时补省略号。两者要一起看，单独写省略号配置，一般不会得到你想要的效果。

再给用户展开入口

如果内容确实值得继续看，我们给一个按钮：

Text(this.articleText)
  .maxLines(this.expanded ? 20 : 3)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .ellipsisMode(EllipsisMode.END)

这里的思路很朴素：没展开时最多 3 行，展开后给一个足够大的行数。ellipsisMode(EllipsisMode.END) 表示省略号放在末尾。一般文章摘要这么做最自然，读者也最容易理解。

你可以自己改两个地方试试：把 maxLines(3) 改成 1，再把 EllipsisMode.END 换成 START 或 CENTER。有些模式在单行文本里更明显，多行场景下不要强行追求花样。

如果你做过资讯列表、商品描述或者评论预览，最容易翻车的是哪种长文？下一篇想先看 Symbol、StyledString，还是继续深挖 Text 的细节？

完整代码

@Entry
@Component
struct ArkUITextExpandDemo {
  @State expanded: boolean = false;

  private articleText: string = '很多页面不是内容不好，而是一下子把长文全摊开了。用户只是想先扫一眼重点，结果被整段文字顶满屏幕。我们可以先用 maxLines 收住内容，再用 textOverflow 给出省略提示，需要时再展开。这样页面不拥挤，读者也能自己决定要不要继续看。';

  @Builder
  sectionTitle(title: string) {
    Text(title)
      .width('100%')
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#334155')
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Text')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('长文别一股脑砸到用户脸上')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('今天只看长文本怎么收起来。先用两行摘要兜住版面，再给用户一个展开入口。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('两行摘要')

          Text(this.articleText)
            .width('100%')
            .fontSize(15)
            .fontColor('#334155')
            .lineHeight(24)
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })

          Text('适合列表摘要、卡片说明和评论预览。')
            .width('100%')
            .fontSize(13)
            .fontColor('#64748B')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('展开和收起')

          Text(this.articleText)
            .width('100%')
            .fontSize(15)
            .fontColor('#334155')
            .lineHeight(24)
            .maxLines(this.expanded ? 20 : 3)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .ellipsisMode(EllipsisMode.END)

          Button(this.expanded ? '收起内容' : '展开阅读全文')
            .height(36)
            .fontSize(14)
            .fontColor('#2563EB')
            .backgroundColor('#DBEAFE')
            .borderRadius(18)
            .onClick(() => {
              this.expanded = !this.expanded
            })
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('省略位置')

          Text('ellipsisMode 要和 maxLines、TextOverflow.Ellipsis 一起用。单独写 ellipsisMode，页面不会凭空出现省略号。')
            .width('100%')
            .fontSize(15)
            .fontColor('#475569')
            .lineHeight(24)
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .ellipsisMode(EllipsisMode.END)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}