输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用Text组件嵌套多个Span组件的布局效果示例

Text组件嵌套多个Span组件的布局效果示例

更新时间: 2026-06-26 07:47
本文导读

问题现象

开发者使用Text组件中嵌套多个Span组件时，想要实现以下两个效果：

  • 效果一：需要给Span组件设置最大的字符数，超出部分用省略号显示。
  • 效果二：其中一个Span组件排不下一行时可以自动换行不会被截断。

背景知识

解决方案

  • 场景一：单独实现以上两个效果。
    • 针对效果一：可以使用if()条件渲染方法实现。
      收起
      自动换行
      深色代码主题
      复制
      1. @Entry
      2. @Component
      3. struct CombinedSpanExampleOne {
      4.   testInfo: string = '旨在指导开发者和设计师打造统一';
      5. 

      6.   build() {
      7.     RelativeContainer() {
      8.       Text() {
      9.         if (this.testInfo.length > 5) {
      10.           Span(this.testInfo.slice(0, 5) + ' ... ');
      11.         } else {
      12.           Span(this.testInfo);
      13.         }
      14.         Span('从理念到实现');
      15.         Span('好的用户体验');
      16.         Span('合理设计理念');
      17.         Span('完美视觉风格');
      18.         Span('交互事件归一');
      19.       }
      20.       .fontSize(14);
      21.     }
      22.     .height('100%')
      23.     .width('85%')
      24.     .margin({ left: 30, top: 220 });
      25.   }
      26. }

      效果预览：

    • 针对效果二：先获取当前屏幕宽度，再计算指定文本的宽度，将两者对比判断是否需要换行，如果需要换行，则插入一个换行符来实现。
      收起
      自动换行
      深色代码主题
      复制
      1. import display from '@ohos.display';
      2. import { MeasureUtils } from '@kit.ArkUI';
      3. 

      4. @Entry
      5. @Component
      6. struct CombinedSpanExampleTwo {
      7.   msg: string = '为你提供全端侧的针对性设计建议';
      8.   message: string = '和谐的数字世界';
      9.   msgAdd: string = '共同构建一个和谐的数字世界';
      10.   uiContext: UIContext = this.getUIContext();
      11.   uiContextMeasure: MeasureUtils = this.uiContext.getMeasureUtils();
      12.   textWidth: number = display.getDefaultDisplaySync().width - this.getUIContext().vp2px(60);
      13. 

      14.   build() {
      15.     Column() {
      16.       Row() {
      17.         Text() {
      18.           Span(this.msg).fontColor('#ff2f69ff').fontSize(14);
      19.           if (this.changeLine(this.msg, this.message)) {
      20.             Span('\n');
      21.           }
      22.           Span(this.message).fontColor(Color.Black).fontSize(14);
      23.         }
      24.         .textAlign(TextAlign.Start)
      25.         .width('100%')
      26.         .backgroundColor('#ffe9e9e9');
      27.       }
      28.       .width('100%')
      29.       .padding({ left: 30, right: 38 })
      30.       .height(200);
      31.     }
      32.     .width('100%')
      33.     .height('100%')
      34.     .justifyContent(FlexAlign.Center)
      35.     .alignItems(HorizontalAlign.Center);
      36.   }
      37. 

      38.   changeLine(msg1: string, message: string): boolean {
      39.     let i: number = 0;
      40.     let j: number = 0;
      41.     while (j < msg1.length) {
      42.       j++;
      43.       if (this.getTextWidth(msg1.substring(i, j), 14) > this.textWidth) {
      44.         i = j - 1;
      45.       }
      46.     }
      47.     console.info(`msgAdd ${this.msgAdd}`);
      48.     return this.getTextWidth(msg1.substring(i), 14) + this.getTextWidth(message, 14) > this.textWidth;
      49.   }
      50. 

      51.   getTextWidth(content: string, fontSize: number): number {
      52.     const width = this.uiContextMeasure.measureText({
      53.       textContent: content,
      54.       fontSize: fontSize
      55.     });
      56.     console.error(`getTextWidth: content: ${content}, width: ${width}`);
      57.     return width;
      58.   }
      59. }

      当changeLine方法传入的文本（msgAdd）和msg加起来超过一行时，会进行换行。

      换行效果预览：

      当changeLine方法传入的文本（message）和msg加起来不超过一行时，不会进行换行。

      不换行效果预览：

  • 场景二：将以上两个效果结合在一起实现。使用substring()方法截取指定长度字符，通过三元运算符来动态截断文本换行并添加省略号实现以上两个效果。
    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct CombinedSpanExampleThree {
    4.   longText: string =
    5.     '第一行需要截断的文本内容结束第二行开始需要自动换行的长文本第三行要显示全部的文本部分且没有省略号不会被截断可以换行';
    6. 

    7.   build() {
    8.     Column() {
    9.       Text() {
    10.         Span(this.getTruncatedText(14, 0))
    11.           .fontColor(Color.Blue);
    12.         Span(this.getTruncatedText(15, 14))
    13.           .fontColor(Color.Black)
    14.           .textBackgroundStyle({ color: Color.Yellow });
    15.         Span(this.getTruncatedText(Infinity, 29))
    16.           .fontColor(Color.Green);
    17.       }
    18.       .width('80%')
    19.       .margin({ top: 20 })
    20.       .textOverflow({ overflow: TextOverflow.None })
    21.       .backgroundColor('#FFEAEAEA');
    22.     }
    23.     .width('100%')
    24.     .height('100%')
    25.     .alignItems(HorizontalAlign.Center)
    26.     .justifyContent(FlexAlign.Center);
    27.   }
    28. 

    29.   private getTruncatedText(maxLength: number, startIndex: number): string {
    30.     const targetText = this.longText.substring(startIndex);
    31.     return targetText.length > maxLength ?
    32.       targetText.substring(0, maxLength) + '...' + '\n' :
    33.       targetText;
    34.   }
    35. }

    效果预览：

常见FAQ

Q：Text组件如何实现以字母为单位进行截断效果。

A：通过wordBreak属性设置断行规则WordBreak.BREAK_ALL即可实现字母为单位进行截断效果。可以参考示例4（设置文本断行及折行）。

Q：Span组件如何设置背景色。

A：可以添加textBackgroundStyle属性来给Span组件设置背景色。

如何为RichEditor中插入的图片绑定缩放手势
如何实现List组件在多列模式下特殊列表项的独立布局
相关推荐
文档使用文本常见问题
文档如何设置Text组件的缩进避让
文档关于Span减少字体大小无法自适应缩放的问题
文档文本显示 (Text/Span)
文档text开发指导
文档Text组件下Span布局属性和触摸事件无效
文档Text嵌套Span组件maxFontSize失效
文档弹窗页面文本重叠
文档如何解决Text组件文本为中文、数字、英文混合时显示省略号截断异常的问题
文档如何跨Text组件选择文本
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词