如何显示“经典” CSS / Javascript中的分数 [英] How to display "Classic" fractions in CSS / Javascript

问题描述

我有一个分数，我想显示它整齐，漂亮。

I have a fraction and I want to display it neatly and nicely.

例如

4 / 5

将是

4

-

5

4
-
5

我看过这个，虽然这个解决方案是体面的，问题在于让4和5在同一行与一个直行分隔他们在传统的分数。

I have looked at this and while this solution is decent the problem lies in having the 4 and the 5 in the same line with a straight line separating them as in traditional fractions.

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

Any hack or solution would be acceptable. Not necessarily CSS, Javascript or any other language is acceptable

推荐答案

如果你乐于使用JQuery，您需要添加，然后您可以使用以下：

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:

CSS

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

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

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

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

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

这篇关于如何显示“经典” CSS / Javascript中的分数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！