我可以在<sub>标签内换行吗？

Question

我正在尝试显示一个公式。分母在文本中很长，我想换行。有人可以帮忙吗？

我当前的代码：

Version 73.0.3683.86

我的结果是：有效订户/订户总数

我想要什么：

<p>
   <sup>Active Subscribers</sup>
   <span style="font-size:30px;">/</span>
   <sub>Total Number of Subscribers</sub>
</p> 

但是带有sup和sub标签。抱歉，我不知道为什么无法添加图像。

这里是一个代码笔链接：https://codepen.io/rashmeereddy25/pen/wZBQmx

Answer 1

我猜你可以像这样使用css网格：

<div class="grid-container">
  <div class="grid-item"><sup>Active Subscribers</sup>
    <span style="font-size:30px;">/</span>
  </div>
  <div class="grid-item">
    <sub class="tete">Total Number <br> of Subscribers</sub>        
  </div>
</div>

和CSS：

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
}

Answer 2

只需删除br标签并添加css规则：

sub{ display: inline-block; width: 80px; }

sub{
  display: inline-block;
  width: 80px;
}

<p>
  <sup>Active Subscribers</sup>
  <span style="font-size:30px;">/</span>
  <sub>Total Number of Subscribers</sub>
</p> 

When I add a br tag:

<p>
  <sup>Active Subscribers</sup>
  <span style="font-size:30px;">/</span>
  <sub>Total Number of Subscribers</sub>
</p> 

I need the "of Subscribers" under "Total Number"

Answer 3

愤怒不远...

请参阅=> https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

sub {
  display: inline-block;
  vertical-align: text-top;
}

<p>
  <sup>Active Subscribers</sup>
  <span style="font-size:30px;">/</span>
  <sub>Total Number <br> of Subscribers</sub>
</p> 

Answer 4

就像我说的那样，MathML可以很容易地做到这一点：https://jsfiddle.net/2gjsnxqd/

<math>
    <mfrac>
        <mi>Active Subscribers</mi>
        <mi>Total Number of Subscribers</mi>
    </mfrac>
</math>

当然，考虑到MathML是HTML标准https://caniuse.com/#feat=mathml的一部分，支持不是应有的。

这是我看到的，因为我使用Firefox作为主要浏览器：

如果您以后决定走这条路，我将从这里开始：Daniel I. Scully - A Beginner's Guide to MathML