html - 2 行のテキストの間に線を配置する簡単な方法はありますか?

Question

たとえば、 の代わりにa+b/c' a+b' の部分の上に ' c' の部分を置き、その間に線を入れます。

このように分数線を使用してみました<sup>a+b</sup>&frasl;<sub>c</sub>が、代わりに、テキストが真上と真下にある水平線とは対照的に、この^a+b ⁄ _{cが生成されます。}

Answer 1

これをチェックして

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) {
    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/

source : CSS / JavaScript で水平線を使用して「クラシック」の積み上げ分数を表示する方法は?

Answer 2

KG Traditional Fractions 2フォントが使えるようになりました！個人利用は無料です！