javascript - 如何在 CSS / JavaScript 中用水平线显示“经典”组合分数？

Question

我有一小部分，我想整齐漂亮地展示它。

例如

4/5 

将会

 4
 —
 5

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

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

Answer 1

用这个

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

演示

---

对于直线

HTML

<div class="top">2</div><div class="bottom">6</div>​

CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

​演示2

Answer 2

.fraction {
  display: inline-block;
  position: relative;
  vertical-align: middle; 
  letter-spacing: 0.001em;
  text-align: center;
  font-size: 12px;
  }
.fraction > span { 
  display: block; 
  padding: 0.1em; 
  }
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

Foobar
  <div class="fraction">
    <span class="fup">4</span>
    <span class="bar">/</span>
    <span class="fdn">5</span>
  </div>
Foobar

更改 .fraction 字体大小以将其设置为您想要的大小

Answer 3

如果您乐于使用 JQuery 并希望最小化您需要添加的标记，那么您可以使用以下内容：

CSS

.fraction, .top, .bottom {
    padding: 0 5px;    
}

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

.bottom{
    border-top: 1px solid #000;
    display: block;
}

HTML

<div class="fraction">1/2</div>
<div class="fraction">3/4</div>
<div class="fraction">1/32</div>
<div class="fraction">77/102</div>

jQuery

$('.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>
        ')
    }    
});

工作示例：http: //jsfiddle.net/xW7d8/

没有 JQuery

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

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

Answer 4

您需要使用字体中可用的上下文替代方案。目前对此的支持不是很好，但它迟早会出现在任何地方。

如果您fractions在号码上有课程，您将使用：

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

恼人的 Gecko 使用将传递给字体的原始信息，但 ms 版本应该成为标准。

这是一个演示。http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions

现在它只在 Gecko 和 Trident 中，但 Webkit 肯定会赶上。

Answer 5

您可能想查看使用 Javascript的MathJax 之类的东西。

如果您只使用基本分数，则可以使用 Unicode 字符（或等效的 HTML 实体）：
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞</p>

对于纯 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>⁄&lt;sub>8</sub>
</span>

Answer 6

Flexbox 现在允许一些额外的选项

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

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

<span class="fraction">
  <span class="numerator">12</span>
  <span class="denominator">7</span>
</span>

Answer 7

我个人认为在这种情况下不需要 JavaScript。

查看以下内容：

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

代码笔

Answer 8

我发现最好的组合是使用 0.5em 大小和 unicode 小数斜线（⁄“ ⁄ ”）。分子应该是vertical-align:super。如果您愿意放弃对 IE7 及以下版本的支持，您可以使用:beforepsuedo-class 使标记更简单。

.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>

（演示）

---

你也可以使用直接的 unicode 方法来渲染 ¹⁹⁄₄₅：

¹⁹⁄₄₅

（参见维基百科文章。）

Answer 9

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

HTML：

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

CSS：

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;
}

结果：

Answer 10

我们想要一个垂直书写的分数，它正确对齐，容纳混合数字，并且可以使用 HTML 简洁地写入。这可以简单地使用 HTML 属性或标签以及一些 CSS 来完成。不涉及 Javascript。此方法也适用于对齐混合分数以确保分数垂直居中，但不适合多层复杂分数。

使用标签名称的想法

让fraction, numerator,denominator成为通过内联块、相对位置、垂直对齐和边框在纯 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>.

例子

我缩短了标签名称并添加了填充以解决冲突。我还尝试实现一个小部分 html。

frac, numer, denom, fracsmall {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px; margin-right: 2px; 
}

frac, fracsmall {
    display: inline-block;
    text-align: center;    
}
 
denom {
    border-top: 1px solid;
    display: block; /* Creates new line */
}

fracsmall > numer {
    font-size: 75%;
}

fracsmall > denom {
    font-size: 75%;
}

The value of 9<frac><numer>3</numer><denom>4</denom></frac> is also written 
<frac><numer>39</numer><denom>4</denom></frac>.

Also, <fracsmall><numer>1</numer><denom>1</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>2</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>3</denom></fracsmall> + ... is divergent.
<br />

Here is a more complex fraction
<frac>
<numer>
    1 + 
    <frac><numer>1</numer><denom>x</denom></frac> + 
    <frac><numer>1</numer><denom>x<sup>2</sup></denom></frac>
</numer>
<denom>
    x+<frac><numer>1</numer><denom>y</denom></frac>+z
</denom>
</frac>
<br />

Let's try with a continued fraction. π = 
<frac>
<numer>4</numer>
<denom> 1 +
<frac>
<numer>1<sup>2</sup></numer>
<denom> 3 +
    <frac>
    <numer>2<sup>2</sup></numer>
    <denom> 5 +
        <frac>
        <numer>3<sup>2</sup></numer>
        <denom> 7 + ...
        </denom>
        </frac>
    </denom>
    </frac>
</denom>
</frac>
</denom>
</frac>. Looks kinda awkward without bracketing...

Answer 11

我发现这对我有用

因为当分母较长时我需要排队，当分子较长时我需要排队，我像这样更改了上面的一些代码（johnatan lin）。当分子较长时，分子使用类分子，分母较长时不使用类，分子不要使用类，分母使用类分母。

CSS 样式

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

html代码示例

Ricavi Numero di coperti

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

<h1>A way to show fractions (not only numers)</h1>
This is what I did after different solutions found on stackoverflow.

<h2>This is with longer numerator</h2>
<div class="fraction">
  <div class='numerator'>Longer than the other one</div>
  <div>Numero di coperti</div>
</div>


<h2>This is longer denominator</h2>
<div class="fraction">
  <div>Ricavi</div>
  <div class="denominator">Numero di coperti</div>
</div>
<p>Hello from Giovanni</p>

一种缩短这些东西的方法

为了让事情进展得更快，我把这个 javascript 放在了标签之间或另一个 js 文件中。

function numeratore(num, den){
    document.write("<div class='fraction'><div class='numerator'>" + num + "</div><div>" + den + "</div></div><div id='div1'></div>")
}

function denominatore(num, den){
    document.write("<div class='fraction'><div>" + num + "</div><div class=\"denominator\">" + den + "</div></div><div id='div1'></div>")
}

并将其放入 html 正文

<script>
denominatore("Ricavi", "numeri di coperti")
numeratore("Costi di produzione", "Numero menu serviti")
</script>

denominatore：当分母较长时 numeratore：当分子较长时

和css，就像以前一样

这进入标签或进入

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