HTML：我可以将下标文本放在上标下吗？ [英] HTML: can I place subscript text right under the superscript?

问题描述

我有一个词，它有上标和下标。现在我将它渲染成这样 word< sub> 1< / sub>< sup> 2< / sup>< / code>
并得到以下内容：

  word  1   2  。
 
 
 
如何将下标正好放在上标下？ 
 
解决方案
这是一个干净的解决方案。创建两个CSS类：
  .nobr {
 white-space：nowrap; 
} 
 .supsub {
 display：inline-block; 
保证金：-9em 0; 
 vertical-align：-0.55em; 
 line-height：1.35em; 
 font-size：70％; 
 text-align：left; 
} 
  
您可能已将nobr类作为< nobr>替代。现在为了表示硫酸盐的分子式，使用supsub类如下：
 
 
 < span class =nobr > SO< span class =supsub> 2-< br /> 4< / span>< / span> 
  
也就是说，将上标/下标放在supsub类中，并放入一个< br />它们之间。如果你喜欢你的上标/下标有点大或小，那么调整字体大小，然后修改垂直对齐和行高。边缘设置中的-9em用于保持上标/下标不加上包含它们的行的高度;任何大的价值都可以做到。
 
I have a word, which has both superscript and subscript. Now I render it like this word<sub>1</sub><sup>2</sup>
And get the following: 
word12.


How can I put the subscript exactly under the superscript?
解决方案
Here's a clean solution. Create two CSS classes:
.nobr {
   white-space: nowrap;
}
.supsub {
   display: inline-block;
   margin: -9em 0;
   vertical-align: -0.55em;
   line-height: 1.35em;
   font-size: 70%;
   text-align: left;
}
You might already have the "nobr" class as a <nobr> replacement. Now to express the molecular formula for sulfate, use the "supsub" class as follows:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
That is, enclose your superscript/subscript within the "supsub" class, and put a <br /> between them. If you like your superscripts/subscripts a bit larger or smaller, then adjust the font size and then tinker with the vertical-align and line-height. The -9em in the margin setting is to keep the superscripts/subscripts from adding to the height of the line containing them; any big value will do.

                        
这篇关于HTML：我可以将下标文本放在上标下吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！