华为鸿蒙开发 ArkTS 怎么实现一行或者多行展示之后超出省略号（超出...）

原创已于 2025-02-10 17:15:38 修改 · 3.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#华为 #ArkTS #harmonyos #鸿蒙开发

于 2023-12-07 11:27:55 首次发布

HarmonyOS 同时被 2 个专栏收录

2 篇文章

订阅专栏

ArkTS

2 篇文章

订阅专栏

文章介绍了如何使用代码在文本中实现一行和两行展示时的省略号效果，提供了相应的代码片段和整体效果图展示。

个人博客（vue3 + nodejs + mysql ）http://snows-l.sitehttp://snows-l.site

一、代码

Text(item.des)
  .fontSize(16)
  .fontColor('#9B9B9B')
  .height(40)
  .width('100%')
  .maxLines(2)
  .textOverflow({ overflow:TextOverflow.Ellipsis })

二、效果图

1、一行展示省略号

2、两行展示省略号

3、来张整体效果图

5 条评论

once258哈哈 2024.01.03
你的列表怎么做的换行呀
- __冬七回复once258哈哈 2024.01.03
  然后item项宽度设置25%，一行就是4个，超出就自动换行了： // 局部自定义构建函数构建的组件不实用关键字 function @Builder ModuleItemBuilder(item) { Column() { Image(item.img) .width(30) .height(30) .objectFit(ImageFit.Contain) Text(item.title) .maxLines(1) // 要展示的行数 .textOverflow({ overflow: TextOverflow.Ellipsis }) .height(20) .margin({ top: 10 }) } .width('25%') .height(60) .margin({ top: 10, bottom: 10 }) .padding({ left: 2, right: 2 }) .onClick(() => { router.pushUrl({ url: item.path, params: { id: item.id } }, router.RouterMode.Single) }) }
- __冬七回复once258哈哈 2024.01.03
  用的Flex布局， // 用了 Flex 组件的布局方式参数 { wrap: FlexWrap.Wrap } 自动换行 Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.utils, (item: ModuleItem) => { // 局部自定义构建函数的调用方法 this.ModuleItemBuilder(item) }, item => item.id) } .padding({ top: 10, bottom: 10 }) .height(180) .backgroundColor('#fff') .borderRadius(10)