如何显示“经典”用CSS / JavaScript中的水平线构建分数？ [英] How to display "Classic" built-up fractions with an horizontal line in CSS / JavaScript?

问题描述

我有一小部分，我希望能够整齐，漂亮地显示出来。

例如

4 / 5

会是

4
-

5

我曾看过直线线在同一行中，将它们与传统分数分开。

任何黑客或解决方案都是可以接受的。不一定使用CSS，Javascript或任何其他语言是可以接受的。如果您很乐意使用JQuery并希望将标记最小化，您需要添加，然后您可以使用以下内容：

CSS

  .fraction，.top，.bottom {
 padding：0 5px; 
} 
 
 .fraction {
 display：inline-block; 
 text-align：center; 
} 
 
 .bottom {
 border-top：1px solid＃000; 
 display：block; 
} 
  

HTML $ b

 < 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

< pre $ $（'。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/

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

For example

4/5

would be

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.

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

解决方案

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

Working example: http://jsfiddle.net/xW7d8/

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