在Text组件中,如何实现文本溢出时显示省略号?需要哪些属性配合使用?


HarmonyOS Next
2025-03-27 18:39:03
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
SoraLuna

📍在 Text 组件中实现文本溢出显示省略号

在 HarmonyOS 的 ArkUI 框架中,若希望在文本内容溢出时显示省略号("..."),需要 配合使用以下两个属性

  • ​textOverflow​​:设置文本溢出时的处理方式
  • ​maxLines​​:设置显示的最大行数

📌 单行文本溢出显示省略号

@Entry
@Component
struct SingleLineEllipsisExample {
  build() {
    Column() {
      Text('这是一个超长的文本示例,当文本内容超过容器宽度时,末尾会显示省略号。')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .width('100%')
    }
  }
}

📌 多行文本溢出显示省略号

@Entry
@Component
struct MultiLineEllipsisExample {
  build() {
    Column() {
      Text('这是一个多行文本溢出的示例。当文本内容超过指定的最大行数时,超出的部分将以省略号表示。')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(2)
        .width('100%')
    }
  }
}

✅ 注意事项

  • ​textOverflow​​ 必须与​​maxLines​​ 搭配使用才会生效;
  • 建议设置明确的​​width​​ 限制容器宽度,否则省略效果可能无法触发。


分享
微博
QQ
微信
回复
2025-03-27 23:41:07
相关问题
HarmonyOS Text超出显示省略号
1968浏览 • 1回复 待解决
如何计算文本是否溢出省略
2472浏览 • 1回复 待解决
Text文本过长如何实现上下滚动?
1917浏览 • 1回复 待解决
多行文本省略的展开与显示
2230浏览 • 1回复 待解决
HarmonyOS Text组件文本怎么换行
3116浏览 • 1回复 待解决