一、需求
开发中有一些需要用到上下角标的地方,比如说化学式、数学式、注释。。。除了可以使用上下角标的标签,还可以通过css样式和CV大法实现,以下是具体实现方式。
二、实现方法
(1)标签写法:
<sup></sup> // 上标
<sub></sub> // 下标
示例:
<div>上标标签
注释 <sup>[1]</sup>
</div>
<div>下标标签
H<sub>2</sub>O
</div>
(2)css样式写法
将需要被上标或者下标的文本,包裹在span标签中,再给span标签分别设置以下css样式即可
上标:vertical-align: super;
下标:vertical-align: sub;
示例:
<div>上标样式: 2*2= 2 <span style="vertical-align: super">2</span> </div>
<div>下标样式: PM <span style="vertical-align: sub">2.5</span> </div>
(3)CV大法
虽然上下角标的使用场景不是特别多,但是如果页面有多个文本需要用的时候也很头疼,标签和样式都太麻烦了,为了方便高效的开发,(其实只是我懒而已)准备好了一些常用的上下角标,CV过去就可以了:
上标:N¹²³⁴⁵⁶⁷⁸⁹⁰ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ʰ ʲ ʳ ʷ ʸ ˡ ˢ ˣ ª ʹ ʺ ʻ ʼ ʽ ˘ ˚ ˜ º ™
下标:PM .₀₁₂₃₄₅₆₇₈₉ ₊ ₋ ₌ ₍ ₎ ˌ ˍ ˎ ˏ ˛
ps:当然如果你有其他更好的办法,可以给我留言噢~