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

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

例如

4/5

将会

4

-

5

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

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

回答:

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

.fraction, .top, .bottom {

padding: 0 5px;

}

.fraction {

display: inline-block;

text-align: center;

}

.bottom{

border-top: 1px solid #000;

display: block;

}

<span class="fraction">1/2</span>

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

<span class="fraction">1/32</span>

<span class="fraction">77/102</span>

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

')

}

});

以上是 如何在CSS / JavaScript中用水平线显示“经典”组合分数? 的全部内容, 来源链接: utcz.com/qa/419426.html

回到顶部