如何在 CSS/JavaScript 中用水平线显示“经典”组合分数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13878772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display "Classic" built-up fractions with an horizontal line in CSS / JavaScript?
提问by cjds
I have a fraction and I want to display it neatly and nicely.
我有一个分数，我想整洁漂亮地显示它。
For example
例如
4/5
4/5
would be
将是
4
-
5
4
-
5
I have looked at thisand while this solution is decent the problem lies in having the 4 and the 5 in the same line with a straightline separating them as in traditional fractions.
我看过这个，虽然这个解决方案不错，但问题在于将 4 和 5 放在同一条线上，用一条直线将它们分开，就像在传统分数中一样。
Any hack or solution would be acceptable. Not necessarily CSS, Javascript or any other language is acceptable
任何黑客或解决方案都是可以接受的。不一定接受 CSS、Javascript 或任何其他语言
采纳答案by My Head Hurts
If you are happy to use JQuery and want to minimise the mark-up that you need to add then you could use the following:
如果您乐于使用 JQuery 并希望最小化您需要添加的标记，那么您可以使用以下内容：
CSS
CSS
.fraction, .top, .bottom {
padding: 0 5px;
}
.fraction {
display: inline-block;
text-align: center;
}
.bottom{
border-top: 1px solid #000;
display: block;
}
HTML
HTML
<span class="fraction">1/2</span>
<span class="fraction">3/4</span>
<span class="fraction">1/32</span>
<span class="fraction">77/102</span>
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>
')
}
});
Working example: http://jsfiddle.net/xW7d8/
工作示例：http: //jsfiddle.net/xW7d8/
回答by Sowmya
回答by Oskari Kantoniemi
.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>
FoobarChange .fraction font-size to get it to a size you want
更改 .fraction font-size 以使其达到您想要的大小
回答by Rich Bradshaw
You need to use the contextual alternatives available in the font. Support for this isn't great right now, but it will turn up everywhere sooner or later.
您需要使用字体中可用的上下文替代方案。目前对此的支持不是很好，但迟早会出现在任何地方。
If you had the class fractionson the number, you'd use:
如果你fractions在号码上有课，你会使用：
.fractions {
-moz-font-feature-settings: "frac=1";
-ms-font-feature-settings: "frac" 1;
}
Annoyingly Gecko uses the raw info that would be passed to the font, but the ms version should become standard.
恼人的 Gecko 使用将传递给字体的原始信息，但 ms 版本应该成为标准。
Here is a demo. http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions
这是一个演示。http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions
Right now it's only in Gecko and Trident, but Webkit will surely catch up.
现在只有 Gecko 和 Trident，但 Webkit 肯定会迎头赶上。
回答by DisgruntledGoat
You may want to look at something like MathJaxwhich uses Javascript.
您可能想看看使用 Javascript 的MathJax 之类的东西。
If you are only using basic fractions you can use the Unicode characters (or equivalent HTML entities):
? ? ? ? ? ? ? ? ?
如果你只使用基本的分数，你可以使用Unicode字符（或等效HTML实体）：
？? ? ? ? ? ? ? ?
For pure CSS, using the horizontal bar may be "traditional" but most people nowadays use the diagonal slash, even when writing fractions on paper. Here is what I use:
对于纯 CSS，使用单杠可能是“传统”，但现在大多数人使用斜线，即使在纸上写分数也是如此。这是我使用的：
.fraction > sup,
.fraction > sub {
font-size: .66em;
}
.fraction > sup {
vertical-align: .4em;
}
.fraction > sub {
vertical-align: -.2em;
}
With this HTML:
使用此 HTML：
<span class="fraction">
<sup>1</sup>?<sub>8</sub>
</span>
回答by Paulie_D
Flexbox now allows some additional options
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>回答by Giorgi Gzirishvili
I, personally, see no need for JavaScript in this case.
我个人认为在这种情况下不需要 JavaScript。
Check out the following:
查看以下内容：
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 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>回答by chowey
I find the best combination is using a 0.5em size with the unicode fractional slash (⁄" ⁄ "). The numerator should be vertical-align:super. And if you can affort to drop support for IE7 and below, you can use the :beforepsuedo-class to make the markup simpler.
我发现最好的组合是使用 0.5em 大小和 unicode 小数斜线（⁄“⁄”）。分子应该是vertical-align:super。如果您可以努力放弃对 IE7 及更低版本的支持，您可以使用:before伪类使标记更简单。
.num {
font-size: 0.5em;
vertical-align: super;
}
.den {
font-size: 0.5em;
}
.den:before {
content: '44';
font-size: 2em;
}
and
和
<span class="num">19</span><span class="den">45</span>
(Demo)
（演示）
You can also use the straight unicode approach to render ¹⁹⁄₄₅:
您还可以使用直接的 unicode 方法来呈现 ¹⁹⁄₄₅：
¹⁹⁄₄₅
(See the wikipedia article.)
（请参阅维基百科文章。）
回答by Jonathan Lin
This does not automatically convert '1/2' to a fraction form. But if you have more control over the templating, you can do the following. Since no one has suggested using a table yet, here goes:
这不会自动将“1/2”转换为分数形式。但是，如果您对模板有更多控制权，则可以执行以下操作。由于还没有人建议使用表格，这里是：
HTML:
HTML：
<table class="fraction">
<tr>
<td class="top">Top of Fraction</td>
</tr>
<tr>
<td class="bottom">Bottom of Fraction</td>
</tr>
</table>
CSS:
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;
}
Result:
结果：
回答by Giovanni G. PY
I found this useful to me
我发现这对我有用
As I needed to have the line up when denominator was longer and down when numerator was longer, I changed some code above (johnatan lin) like this. When you have a longer numerator use the class numerator for the numerator and no classes for denoninator when you have longer denominator, do not use classes for the numerator and use the class denominator for the denominator.
由于我需要在分母较长时对齐，而在分子较长时向下对齐，因此我像这样更改了上面的一些代码（johnatan lin）。当分子较长时，分子使用类分子，分母较长时，分母不使用类，不要使用类作为分子，而使用类分母作为分母。
The css style
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;
}
The html code example
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>A way to shorten this stuff
一种缩短这些东西的方法
To make thing go faster I put this javascript (into the body among tags or on another js file with ).
为了让事情进展得更快，我把这个 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>")
}
and this into the html body
并将其放入 html 正文中
<script>
denominatore("Ricavi", "numeri di coperti")
numeratore("Costi di produzione", "Numero menu serviti")
</script>
denominatore: when the denominator is longer numeratore: when the numerator is longer
denominatore：当分母较长时 numeratore：当分子较长时
and the css, like before
和 css，就像以前一样
This goes into the tags or into the
这进入标签或进入
.fraction {
display: inline-flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
.numerator {
border-bottom: 2px solid grey;
}
.denominator {
border-top: 2px solid grey;
}
