Как записать значение дроби, используя HTML? - PullRequest
Новая
       32

Как записать значение дроби, используя HTML?

45 голосов
/ 23 сентября 2011

Я хочу записать значение дроби, как на картинке ниже:

enter image description here

Как записать значение дроби с использованием html без использования изображения?

ПРИМЕЧАНИЕ: я не хочу этот шаблон 1 1/2, но строго так же, как на картинке выше

Ответы [ 9 ]

63 голосов
/ 23 сентября 2011

Попробуйте следующее: 

1<sup>1</sup>&frasl;<sub>2</sub>

Это отображается как:

1 1 & frasl; 2

15 голосов
/ 10 февраля 2016 

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
} 
1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>
11 голосов
/ 23 сентября 2011

Следующий код будет отображаться так же, как и в примере, приведенном в вопросе, и если клиент не поддерживает CSS, он будет отображаться как обычный текст, все еще читаемый как дробь: 

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</sub></span>.</p>

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

Середина <span> служит только для клиентов, которые не отображают CSS - текст по-прежнему читается как 1 12/256 - и поэтому вам следует поместить пробел между целым числом и дробью.

Вы можетеВы хотите изменить размер шрифта, потому что результирующий элемент может быть немного выше, чем другие символы в строке, или вы можете использовать относительную позицию, чтобы немного сместить его вниз.

НоОбщая идея, представленная здесь, может быть достаточной для базового использования.

5 голосов
/ 23 сентября 2011

Вы можете использовать элементы <sup> и <sub> в сочетании с сущностью дробной дроби &frasl;

<sup>1</sup>&frasl;<sub>2</sub> - 1 & frasl; 2

ОБНОВЛЕНИЕ : Я сделал эту скрипку , которая показывает дробную часть в HTML с использованием таблицы. 

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>
3 голосов
/ 27 апреля 2017

Я думаю, что есть более простой способ сделать это. Используйте следующий HTML. 

1 &frac12;
Результат равен 1 & frac12;
2 голосов
/ 16 января 2017

Проверьте следующее: 

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;}
<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

CodePen

2 голосов
/ 10 апреля 2012

Использование MathML ( Спецификация , Википедия ): 

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>
0 голосов
/ 30 января 2018 
br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
0 голосов
/ 28 января 2017

Используя чистый HTML и со свойством margin, вы можете обойти 

br {   
    content: "";
    margin: -1%;
    display: block;
 }
<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
...