如何实现文本后添加一个标签,可以随着文本换行而换行效果

如何实现文本后添加一个标签,可以随着文本换行而换行效果

HarmonyOS
2024-01-30 22:58:06
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
gnt_xxy

可以使用富文本组件,配合H5数据完成。

参考代码

@Entry 
@Component 
struct RichTextExample { 
  @State data: string = 
    '<span style="margin-right:20px">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文一段文字这是一段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文字这是一段文字</span>'+ 
      '<span style="display:inline-block;border:1px solid red">标签</span>'; 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 
      justifyContent: FlexAlign.Center }) { 
      RichText(this.data) 
        .onStart(() => { 
          console.info('RichText onStart'); 
        }) 
        .onComplete(() => { 
          console.info('RichText onComplete'); 
        }) 
        .width(500) 
        .height(500) 
        .backgroundColor(0XBDDB69) 
 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
分享
微博
QQ
微信
回复
2024-02-01 11:15:23
相关问题
如何实现标签文本换行
1776浏览 • 1回复 待解决
粘贴文本,IDE把内容自动换行
1005浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
1291浏览 • 1回复 待解决
HarmonyOS 单行超长文本换行不生效
656浏览 • 1回复 待解决
HarmonyOS 自动换行效果
678浏览 • 1回复 待解决
Text换行无法在后面添加图片
1269浏览 • 1回复 待解决
如何为图片添加一个模糊的效果
1153浏览 • 2回复 待解决
文本添加上划线如何实现
969浏览 • 1回复 待解决
HarmonyOS TextInput如何换行输入
865浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
1422浏览 • 1回复 待解决
HarmonyOS 如何实现一个转圈效果
2043浏览 • 2回复 待解决
鸿蒙-富文本如何添加图片
8437浏览 • 1回复 待解决
HarmonyOS Html文本标签解析器
795浏览 • 1回复 待解决