HarmonyOS 鸿蒙Next 如何实现Span组件中的文本在当前行显示不下时，将当前Span组件换行

HarmonyOS 鸿蒙Next 如何实现Span组件中的文本在当前行显示不下时，将当前Span组件换行 Text组件中有若干Span组件，如果当前行显示不下将要绘制的Span组件中的文本内容时，将当前Span组件换行。

可以使用[@ohos.measure (文本计算)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-measure-0000001774280802)来计算当前Text组件是否超过屏幕宽度，问题是：我该如何让最后这个超出屏幕宽度的Span组件换行？


更多关于HarmonyOS 鸿蒙Next 如何实现Span组件中的文本在当前行显示不下时，将当前Span组件换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

可以使用ContainerSpan+ImageSpan包裹为一组

示例代码

@Entry
@Component
struct Page158 {
  build() {
    Column() {
      Text() {
        ContainerSpan(){
          ImageSpan('').width(0).height(1)
          Span('11111')
        }
        ContainerSpan() {
          ImageSpan('').width(0).height(1)
          Span('22222222222')
        }
        ContainerSpan() {
          ImageSpan('').width(0).height(1)
          Span('33333')
        }
        ContainerSpan() {
          ImageSpan('').width(0).height(1)
          Span('4444')
        }
      }
      .fontSize(50)
    }
    .width('100%')
    .height('100%')
  }
}

cke_1090.png

更多关于HarmonyOS 鸿蒙Next 如何实现Span组件中的文本在当前行显示不下时，将当前Span组件换行的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


老哥，你可以看看我刚刚发的评论，有一种简单的办法，但是，是我误打误撞试出来的，不知道原理是啥，

试了一下，按你这个方法要保证数据源的每个item的第一位是空格才行。可能是官方bug，

嘶，bug！那我不敢用了呀，

误打误撞试出来的一种办法，不知道什么原理，但是应该可行，目前没遇到问题

@Entry
@Component
struct image {
  @State numbers1: string[] = ['00000000000', '1111', '222222', '444444444', '5', '6', '7']

  build() {
    Column() {
      Text() {
        ForEach(this.numbers1, (item: string, infoIndex: number) => {
          Span(infoIndex != 0 ? '  ' + item : item).fontColor('#ff00ff')
        })
      }
      .fontSize('24vp')
    }
  }
}

可以拿这个对比一下就知道差距了

  Text() {
    ForEach(this.numbers1, (item: string, infoIndex: number) => {
      Span(item).fontColor('#ff00ff')
    })
  }
  .fontSize('24vp')

https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.mdh ±%$%-+ 答案尽在文档中，因为判断过长的换行逻辑是空格，

给需要换行的字符串前面补上一个'\n'即可完成Span换行。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

宽度设置了就能换行

HarmonyOS的分布式技术让我实现了跨设备的无缝协作，工作效率翻倍。

能换行不?

有没有一种可能，他不换行是因为你没设置宽度，你设置了他就会换行…

但是几个长短不一的词语，不能都去计算她的宽度呀，

man，给text设宽度啊，谁给span算啊，

给 text 设宽度会换行，但是不是楼主这种需求的换行，不是让 span 里面的词语拆开换行，

在HarmonyOS鸿蒙Next中，Span组件用于在Text组件中显示富文本。当Span组件中的文本在当前行显示不下时，可以通过设置Text组件的maxLines属性来控制文本的换行行为。maxLines属性用于指定文本显示的最大行数，当文本内容超过指定行数时，超出的部分将自动换行。

例如，如果你希望Span组件中的文本在显示不下时自动换行，可以将Text组件的maxLines属性设置为一个较大的值，或者不设置该属性，默认情况下文本会自动换行。

<Text
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:maxLines="10">
    <Span
        ohos:text="这是一段很长的文本，当它超过当前行宽度时会自动换行。"
        ohos:textSize="20fp"
        ohos:textColor="black"/>
</Text>

在上述代码中，Text组件的maxLines属性设置为10，表示文本最多显示10行。如果Span组件中的文本在当前行显示不下，它将自动换行到下一行，直到达到最大行数限制。如果不设置maxLines属性，文本将根据内容自动换行，直到显示完所有内容。

在HarmonyOS鸿蒙Next中，若希望Span组件中的文本在当前行显示不下时自动换行，可以通过以下步骤实现：

  1. 使用Text组件：将Span组件嵌入到Text组件中，Text组件支持自动换行。
  2. 设置Text组件的属性：确保Text组件的maxLines属性设置为null或足够大的值，以允许多行显示。
  3. Span组件的使用：在Text组件内部使用Span组件，当文本内容超出当前行宽度时，Text组件会自动将Span组件的内容换行显示。

示例代码：

Text() {
  Span('这是一段很长的文本，当它超出当前行宽度时会自动换行。')
    .fontSize(16)
    .fontColor(Color.Black)
}
.maxLines(null) // 允许多行显示
.margin({ top: 10, bottom: 10 })

通过这种方式，Span组件中的文本会在当前行显示不下时自动换行。

回到顶部