鸿蒙Next中text超过部分如何显示省略号并设置wordbreak

在鸿蒙Next中，如何实现当text文本内容超出容器宽度时显示省略号（…）？同时需要支持wordBreak属性自动换行，请问具体的样式属性该如何设置？

2 回复

在鸿蒙Next中，设置文本超出显示省略号：

text-overflow: ellipsis;
overflow: hidden;

启用自动换行：

word-break: break-all;

这样文本超长时会自动截断并显示“…”，同时支持单词内换行。简单实用！

更多关于鸿蒙Next中text超过部分如何显示省略号并设置wordbreak的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Text组件的maxLines和textOverflow属性实现文本超出显示省略号，并结合wordBreak属性控制文本换行行为。

示例代码：

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

@Entry
@Component
struct TextExample {
  build() {
    Column() {
      // 单行省略
      Text('这是一段很长的文本内容，超出部分会显示省略号')
        .maxLines(1)
        .textOverflow(TextOverflow.Ellipsis)
        .wordBreak(WordBreak.Normal)

      // 多行省略
      Text('这是一段很长的文本内容，超出两行部分会显示省略号')
        .maxLines(2)
        .textOverflow(TextOverflow.Ellipsis)
        .wordBreak(WordBreak.BreakAll)
    }
  }
}

属性说明：

  1. maxLines
    设置最大行数，超出时触发省略。

  2. textOverflow

    • TextOverflow.Ellipsis：显示省略号（…）
    • TextOverflow.Clip：直接裁剪
    • TextOverflow.None：无效果

  3. wordBreak

    • WordBreak.Normal：默认换行规则（按单词/字符边界）
    • WordBreak.BreakAll：允许任意字符处换行
    • WordBreak.BreakWord：在完整单词内换行（需容器宽度限制）

注意事项：

  • 必须同时设置maxLines和textOverflow才能显示省略号
  • wordBreak需配合固定宽度或弹性布局使用
  • 多语言文本建议使用WordBreak.Normal保持可读性

通过组合这些属性，可以灵活控制文本的截断和换行效果。

回到顶部