您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

如何在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>
        ')
    }    
});
javascript 2022/1/1 18:18:03 有541人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶