HarmonyOS 鸿蒙Next中携带标签的多行文案省略问题

HarmonyOS 鸿蒙Next中携带标签的多行文案省略问题 我有一个带多个标签、最多两行文案，预期如下展示：

  1. 单行能展示的情况：

cke_1853.png

  1. 两行能展示的情况

cke_5465.pngcke_5894.png

  1. 两行，文案超长的时候的情况：

cke_13747.png

想问一下这种 case 如何实现，目前在文档中没有找到类似的场景。


更多关于HarmonyOS 鸿蒙Next中携带标签的多行文案省略问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

常见的实现方法：

1、计算【文案12345[标签]】的文本行数

2、超过两行，则使用【文案1234…[标签]】继续计算行数。（将最后一个字符改为…）

3、判断超过两行，再删掉文案中的最后一个字符，继续计算。【文案123…[标签]】

4、重复步骤3，最终得到刚好两行的文案字符串。

优化点：采用2分法删除。

/**
   * 判断是否超过最大行数
   * @param content
   * @param width  内容宽度
   * @param fontSize
   * @param maxLines 最大行数
   * @returns
   */
  static isOverMaxLines(content: string, width: number, fontSize: number, maxLines: number): boolean {
    const textSizeShow1: SizeOptions = MeasureText.measureTextSize({
      textContent: content,
      constraintWidth: width,
      fontSize: fontSize,
      overflow: TextOverflow.Ellipsis,
      maxLines: maxLines
    })
    const textSizeShow2: SizeOptions = MeasureText.measureTextSize({
      textContent: content,
      constraintWidth: width,
      fontSize: fontSize,
      overflow: TextOverflow.Ellipsis,
      maxLines: 2000000
    })

    if (textSizeShow2 && textSizeShow1 && textSizeShow2?.height && textSizeShow1?.height &&
      (textSizeShow2?.height > textSizeShow1?.height)) {
      return true
    }
    return false
  }

更多关于HarmonyOS 鸿蒙Next中携带标签的多行文案省略问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我想到两个方案：

方案一、采用逐字计算大小的方式，循环减少字的行数，直到满足2行的要求。问题是参数width不好控制，计算也很复杂。要是应用到实际开发中，很难用！

方案二、采用HTML+CSS样式的方式解决。也就是用web组件显示富文本内容。好处是技术成熟。坏处是引入了web组件，某些人看来会觉得有性能浪费。

在HarmonyOS Next中，多行文本携带标签时出现省略问题，可通过以下方式处理：使用Text组件的maxLines属性限制行数，结合textOverflow设置省略方式。若标签影响布局，需确保标签样式与文本样式统一，避免自定义标签破坏文本测量。推荐使用ArkTS的Span组件或自定义布局，精确控制标签与文本的显示逻辑。

在HarmonyOS Next中实现多行标签文案的省略效果，可以通过Text组件的maxLines和textOverflow属性结合布局容器来实现。

建议使用Flex或Column作为容器，内部使用多个Text组件表示标签，并为外层Text设置：

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

对于标签样式，可以通过Text组件的修饰器设置背景色、圆角等属性。关键是要确保容器宽度固定，超出内容会自动显示省略号。

如果遇到特定布局问题，可以结合Flex布局的wrap模式实现标签自动换行，同时保持最大行数限制。

回到顶部