HarmonyOS 如何实现文本内容在文本框距上

Text() 中使用 Span中 padding、margin设置不作用,怎么设置内容距上 距下位置。

想设置文本内容在文本框距上, 就是html 上标 小标的那个效果。

<sup>上标标签</sup>

<sub>下标标签</sub>

Text() {  
  Span('I am LineThrough-span')  
    .height(50)  
    .padding({ bottom: 5 })  
    .fontSize(20)  
  Span('2')  
    .height(50)  
    .alignSelf(ItemAlign.Stretch)  
    .margin({bottom:20})  
    .padding({ bottom: 20, top: 0 })  
    .fontSize(10)  
    .zIndex(10)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
HarmonyOS
2024-09-25 12:31:00
1052浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

关于文本上下标的实现可参考下述代码:

@Entry  
@Component  
struct TextSpanPage {  
  build() {  
    Column() {  
      //下标  
      Row(){  
        Text() {  
          Span('I am LineThrough-span')  
            .fontSize(20)  
        }.height(100).padding({top:10})  
        Text(){  
          Span('2')  
        }.height(100).padding({top:25})  
      }  
      //上标  
      Row(){  
        Text() {  
          Span('I am LineThrough-span')  
            .fontSize(20)  
        }.height(100)  
  
        Text(){  
          Span('2')  
        }.height(100).padding({bottom:10})  
      }  
    }  
    .justifyContent(FlexAlign.Center)  
    .height('100%')  
    .width('100%')  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
分享
微博
QQ
微信
回复
2024-09-25 16:25:03


相关问题
如何获取文本框里的文字宽度
2854浏览 • 1回复 待解决
HarmonyOS 如何获取文本框中光标高度
600浏览 • 1回复 待解决
textinput 文本框是否可以分段展示?
608浏览 • 1回复 待解决
HarmonyOS TextInput全宽文本框怎么使用
313浏览 • 1回复 待解决
如何拿到文本框文字的宽度数值
802浏览 • 1回复 待解决
如何清空文本输入内容
1596浏览 • 2回复 待解决
如何实现文本内容的竖向布局
911浏览 • 1回复 待解决
怎么让文本框在禁用时变灰?
132浏览 • 1回复 待解决
HarmonyOS如何测量文本内容的长度?
804浏览 • 0回复 待解决
webview 如何显示纯文本html内容
2862浏览 • 1回复 待解决
如何实现文本竖向排列
2945浏览 • 1回复 待解决