How to represent fractions in html

问题

I want to represent fractions in html and the code I am using now is this:

<sup>3</sup>&frasl;<sub>8</sub>

And it looks like this:

But I want to represent it something like this:

How do I change it?

Need some guidance on this.

回答1:

It is not possible through pure HTML. But you can create that type of fraction using a bit of CSS.

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>

回答2:

You can use mathjax. It's the defacto library for math rendering. However, it is not lightweight. Note that google chose not to support mathml

Alternately, use html/css. A fraction is just two divs stacked on top of each other with a border in the middle.

来源：https://stackoverflow.com/questions/31773796/how-to-represent-fractions-in-html