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

一尘不染

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

css

我有一个分数，我想很好地展示它。

例如

4/5

将会

4
-
5

我已经看过这个，虽然这个解决方案是体面的，问题出在具有4和5与同一行直分界线他们在传统的分数。

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

阅读 542

2020-05-16

共1个答案

一尘不染

如果您乐于使用JQuery并希望最大程度地减少需要添加的标记，则可以使用以下方法：

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

2020-05-16