如何实现标签随文本换行

文本后边添加一个标签,可以随着文本换行而换行。

HarmonyOS
2024-05-26 12:20:45
1018浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
yu_qingbo

使用的核心API

RichText

核心代码解释

富文本组件,解析并显示HTML格式文本。

核心代码如下:

@Entry 
@Component 
struct RichTextExample { 
  @State data: string = '<span style="margin-right:20px;font-size:25px">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文一段文字这是一段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文一段文字这是段文字这是一段文字</span>' + '<span style="display:inline-block;border:1px solid red;font-size:25px">标签</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.

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 16:07:08
相关问题
如何实现背景跟随文字大小改变
1194浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
1321浏览 • 1回复 待解决
HarmonyOS 单行超长文本换行不生效
659浏览 • 1回复 待解决
HarmonyOS Html文本标签解析器
805浏览 • 1回复 待解决
粘贴文本后,IDE把内容自动换行
1008浏览 • 1回复 待解决
Text怎么显示带html标签文本
5540浏览 • 1回复 待解决
HarmonyOS 富文本不支持trthtd标签
1026浏览 • 1回复 待解决
Text怎么解析展示带html标签文本
2866浏览 • 1回复 待解决
HarmonyOS 视频标签信息布局如何实现
463浏览 • 1回复 待解决
怎样实现XML标签标签值的解析?
980浏览 • 1回复 待解决
HarmonyOS TextInput如何换行输入
881浏览 • 1回复 待解决
如何实现文本竖向排列
3196浏览 • 1回复 待解决
HarmonyOS 带有星球点的标签如何实现
1023浏览 • 1回复 待解决
如何实现文本展开收起功能
1461浏览 • 1回复 待解决