我可以在_標簽內斷線_嗎？

Question

我正在嘗試顯示一個公式。 分母在文本中很長，我想換行。 有人可以幫忙嗎？

我目前的代碼：

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

我的結果是：活躍訂閱者/訂閱者總數

我想要的是：

           Active Subscribers/Total Number 

                              of Subscribers

但是帶有 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