HarmonyOS 鸿蒙Next如何自定义省略文本

HarmonyOS 鸿蒙Next如何自定义省略文本 需求： "后台会返回给我们一个字符串，这个字符串可能很长，也可能很短，要求：

  1. 前端利用“”包裹这个字符串
  2. 包裹的新字符串最大不超过2行，超过两行结尾省略，且需要保留”"
4 回复 
import inspector from '@ohos.arkui.inspector';
import componentUtils from '@ohos.arkui.componentUtils';

@Entry
@Component
export struct TextButton {
  content: string = '#限定的校服，限定的青春！那群陪你度过青涩阳光的人，你还记得他们吗？12月15日中午12点，一起来重拾回忆'
  private measureText = this.content;
  maxLines: number = Infinity
  isCollapse: boolean = true;
  collapseTxt: string = '…”';
  private subTxt: string = '';

  build() {
    Row() {
      Column() {
        Text() {
          Span('#亲爱的朋友')
            .fontColor(Color.Blue)
          Span(this.content)
          if (true) {
            Span(this.collapseTxt)
              .onClick(() => {
                if (this.isCollapse) {
                  this.maxLines = Infinity;
                  this.content = this.measureText;
                  this.isCollapse = false;
                  this.collapseTxt = '[收起]';
                } else {
                  this.isCollapse = true;
                  this.collapseTxt = '…”';
                  this.content = this.subTxt;
                }
              })
          }
        }
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(this.maxLines)
        .fontSize(24)
        .width(300)
        .backgroundColor(Color.White)
        .key('txt_info')
      }
      .width('100%')
    }
    .height('100%')
  }

  listener: inspector.ComponentObserver = inspector.createComponentObserver('txt_info')

  aboutToAppear() {
    let onLayoutComplete: () => void = (): void => {
      if (this.isCollapse) {
        this.getComponentRect('txt_info');
      }
    }
    let onDrawComplete: () => void = (): void => {
      if (this.isCollapse) {
        this.subTxt = this.content;
      }
    }
    let FuncLayout = onLayoutComplete
    let FuncDraw = onDrawComplete

    this.listener.on('layout', FuncLayout)
    this.listener.on('draw', FuncDraw)
  }

  private getComponentRect(key: string) {
    let modePosition = componentUtils.getRectangleById(key);

    let localOffsetHeight = modePosition.size.height;

    if (localOffsetHeight > 300) {
      this.content = this.content.substring(0, this.content.length - 1);
      this.isCollapse = true;
    }
  }
}

更多关于HarmonyOS 鸿蒙Next如何自定义省略文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您可以使用MeasureText.measureTextSize计算文本的高度，然后重新拼接展示的内容，可以参考以下代码：

import MeasureText from '@ohos.measure';
@Entry
@Component
struct TextPage {
  @State text: string = '这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字，你可计算通过计算文本的尺寸自定义省略内容啊哈哈哈哈哈哈哈哈哈';
  @State finalText:string = '......'

  build() {
    RelativeContainer() {
      Text() {
        Span(this.text)
        Span(this.finalText)
          .fontColor(Color.Black)
      }
      .fontSize(20)
      .maxLines(2)
      .margin(20)
      .onAreaChange((oldValue: Area, newValue: Area) => {
        let allSize: SizeOptions = MeasureText.measureTextSize({
          textContent: this.text,
          constraintWidth: newValue.width,
          fontSize: 16
        })
        let twoLineSize: SizeOptions = MeasureText.measureTextSize({
          textContent: this.text,
          constraintWidth: newValue.width,
          fontSize: 20,
          maxLines: 2
        })
        let configString = this.text
        while (Number(allSize.height) > Number(twoLineSize.height)) {
          configString = configString.substring(0, configString.length - 1);
          allSize = MeasureText.measureTextSize({
            textContent: configString + this.finalText,
            constraintWidth: newValue.width,
            fontSize: 20
          });
        }
        this.text = configString
      })
    }
    .height('100%')
    .width('100%')
  }
}

手动包装？

在HarmonyOS Next中，自定义省略文本可以通过使用Text组件的maxLines和ellipsis属性来实现。maxLines用于限制文本显示的最大行数，ellipsis用于指定省略号的样式。

例如，以下代码展示了如何将文本限制为两行，并在超出部分显示省略号：

import { Text } from '@ohos.agp.components';

let text = new Text();
text.text = "这是一段很长的文本，超出部分将被省略。";
text.maxLines = 2;
text.ellipsis = '...';

通过设置maxLines，文本将在指定行数后截断，并在末尾添加ellipsis中定义的省略号。你还可以根据需要调整ellipsis的值，使用其他符号或自定义省略号。

此外，Text组件还支持overflow属性，用于控制文本超出容器时的处理方式。常见的值包括clip（裁剪）和ellipsis（省略）。例如：

text.overflow = 'ellipsis';

通过这些属性，可以灵活地自定义文本的省略行为，以满足不同的UI需求。

回到顶部