如何显示"；经典；CSS/JavaScript中带有水平线的组合分数？

我有一个分数，我想把它显示得干净利落

比如说

4/5 

会是

 4
 —
 5

我已经看过了，虽然这个解决方案很不错，但问题在于4和5在同一条直线上，用一条直线将它们分开，就像在传统的分数中一样

任何黑客或解决方案都是可以接受的。不一定可以接受CSS、Javascript或任何其他语言。

使用此选项

<sup>6</sup>/<sub>7</sub>​

分数{
显示：内联块；
位置：相对位置；
垂直对齐：中间对齐；
字母间距：0.001em；
文本对齐：居中；
字体大小：12px；
}
.fraction>span{
显示：块；
填充：0.1米；
}
.fraction span.fdn{边框顶部：薄实心黑色；}
.section span.bar{display:none；}

Foobar
4.
/
5.
Foobar

您需要使用字体中可用的上下文选项。现在对它的支持不是很好，但它迟早会到处出现

如果在数字上有类

分数
，则使用：

.fractions { 
    -moz-font-feature-settings: "frac=1";
    -ms-font-feature-settings: "frac" 1;
}

令人恼火的是，Gecko使用原始信息，这些信息将被传递到字体中，但ms版本应该成为标准

这是一个演示

现在它只在Gecko和Trident中出现，但Webkit肯定会迎头赶上。
您可能想看看类似于使用Javascript的东西

如果只使用基本分数，则可以使用Unicode字符（或等效的HTML实体）：

¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

对于纯CSS，使用单杠可能是“传统的”，但现在大多数人使用斜杠，即使在纸上写分数时也是如此。以下是我使用的：

.fraction > sup,
.fraction > sub {
  font-size: .66em;
}
.fraction > sup {
  vertical-align: .4em;
}
.fraction > sub {
  vertical-align: -.2em;
}

使用此HTML：

<span class="fraction">
  <sup>1</sup>⁄<sub>8</sub>
</span>


1⁄8
如果您乐于使用JQuery，并且希望最小化需要添加的标记，则可以使用以下方法：

CSS

HTML

1/2
3/4
1/32
77/102

JQuery

$（'.fraction'）。每个（函数（键、值）{
$this=$（this）
var split=$this.html（）.split（“/”）
如果（split.length==2）{
$this.html（'
“+拆分[0]+”
“+拆分[1]+”
')
}    
});

工作示例：

没有JQuery
要在不使用JQuery的情况下实现这一点，可以使用与上述相同CSS的以下HTML：

<div class="fraction">
    <span class="top">1</span>
    <span class="bottom">100</span>
</div>


1.
100
我发现最好的组合是使用0.5em大小和unicode分数斜杠（
⁄；
“/”）。分子应该是
垂直对齐：super
。如果您支持放弃对IE7及以下版本的支持，您可以使用
：before
psuedo类来简化标记

.num {
    font-size: 0.5em;
    vertical-align: super;
}
.den {
    font-size: 0.5em;
}
.den:before {
    content: '\2044';
    font-size: 2em;
}

及

（请参阅。）
这不会自动将“1/2”转换为分数形式。但是如果您对模板有更多的控制权，您可以执行以下操作。由于还没有人建议使用表格，下面是：

HTML:

结果:

Flexbox现在允许一些附加选项


分数{
显示：内联flex；
弯曲方向：立柱；
填充：1em；
对齐项目：居中；
}
.分子{
底边：2倍纯色灰色；
}

3.
4.
12
7.
我个人认为在这种情况下不需要JavaScript

请查看以下内容：


span.frac{
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
}
span.frac>sup，span.frac>sub{
显示：块；
字体：继承；
填充：0.3em；
}
span.frac>sup{边框底部：0.08em实心；}
span.frac>span{display:none；}
742&frasl；73.
我发现这对我很有用
当分母变长时，我需要排队，当分子变长时，我需要排队，所以我修改了上面的一些代码（johnatan lin），如下所示。
当你有一个较长的分子时，使用类分子作为分子，而不使用类分子作为脱宁分子
当分母较长时，不要使用类作为分子，而使用类分母作为分母

css样式
html代码示例
里卡维
科佩蒂数字

分数{
显示：内联flex；
弯曲方向：立柱；
填充：1em；
对齐项目：居中；
}
.分子{
底边：2倍纯色灰色；
}
.分母{
边框顶部：2倍纯色灰色；
}
显示分数（而不仅仅是数字）的方法
这是我在stackoverflow上找到不同解决方案后所做的。
这是一个较长的分子
比另一个长
科佩蒂数字
这是更长的分母
里卡维
科佩蒂数字
来自Giovanni的Hello
我们需要一个垂直书写的分数，该分数正确对齐，能够容纳混合数字，并且可以使用HTML简洁地编写。这可以简单地使用HTML属性或标记以及一些CSS来完成。没有涉及Javascript。该方法也适用于对齐混合分数，以确保分数垂直居中，但不适用于多层复杂分数

使用标记名的想法
让
分数
，
分子
，
分母
成为通过内联块、相对位置、垂直对齐和边框以纯HTML和CSS呈现分数所需的自定义标记名。有时需要一个小的左侧填充物以避免碰撞。CSS样式将是：

fraction, numerator, denominator {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px   
}

fraction {
    display: inline-block;
    text-align: center;    
}

numerator {
    border-top: 1px solid;
    display: block;
}

然后，输入分数的用法依次涉及以下三个标记：

<fraction>
    <numerator>A</numerator>
    <denominator>B</denominator>
</fraction>.

934的值也被写入
394
还有，11
+ 12
+ 13 + ... 这是有分歧的。


这是一个更复杂的分数
1 + 
1x+
1x2
x+1y+z


让我们试着用连分数。π = 
4.
1 +
12
3 +
22
5 +
32
7 + ...
. 没有括号看起来有点尴尬…
什么是“惊人”的解决方案？看起来您正在尝试更改内容，但您不能仅用CSS将a/替换为a-。那么，您将使用Javascript进行此操作吗
$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('
            <span class="top">'+split[0]+'</span>
            <span class="bottom">'+split[1]+'</span>
        ')
    }    
});

<div class="fraction">
    <span class="top">1</span>
    <span class="bottom">100</span>
</div>

.num {
    font-size: 0.5em;
    vertical-align: super;
}
.den {
    font-size: 0.5em;
}
.den:before {
    content: '\2044';
    font-size: 2em;
}

<span class="num">19</span><span class="den">45</span>

&#x00B9;&#x2079;&#x2044;&#x2084;&#x2085;

<table class="fraction">
  <tr>
    <td class="top">Top of Fraction</td>
  </tr>
  <tr>
    <td class="bottom">Bottom of Fraction</td>
  </tr>
</table>

table.fraction {
  display: inline-block;
  text-align: center;
  margin-left: 1em;
}

table.fraction td {
  line-height: 2em;
}

table.fraction td.top {
  border-bottom: 1px solid darkgray;
}

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

fraction, numerator, denominator {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px   
}

fraction {
    display: inline-block;
    text-align: center;    
}

numerator {
    border-top: 1px solid;
    display: block;
}

<fraction>
    <numerator>A</numerator>
    <denominator>B</denominator>
</fraction>.