How to display “Classic” built-up fractions with an horizontal line in CSS / JavaScript?

前端 未结 10 2261
旧巷少年郎
旧巷少年郎 2020-12-03 13:37

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

10条回答
  •  借酒劲吻你
    2020-12-03 14:36

    I, personally, see no need for JavaScript in this case.

    Check out the following:

    span.frac {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
    }
    span.frac > sup, span.frac > sub {
      display: block;
      font: inherit;
      padding: 0 0.3em;
    }
    span.frac > sup {border-bottom: 0.08em solid;}
    span.frac > span {display: none;}

    4273.

    CodePen

提交回复
热议问题