1

I want to create a div, which the width and height are exactly equal to height of 1 character, and the width as well as height should be responsive: if I change the font size, the width and height would also change. I tried :

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;width:100%;padding-bottom:100%;"/>
    </td>
  </tr>
</table>

which the side of red square equals to width of "&nbsp" automaticlly. But I want it be equal to height of "&nbsp", I tried:

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;height:100%;padding-right:100%;"></div>
    </td>
  </tr>
</table>

which just replace "width" with "height" and "padding-bottom" with "padding-right",but seems not working, is there any way to do this?

Ali
  • 3,346
  • 4
  • 21
  • 56
ocomfd
  • 4,010
  • 2
  • 10
  • 19
  • One thing to note: ` ` (it should have a semicolon) – meyi May 25 '18 at 05:59
  • I was doing some research on this and found [this](https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript). It might help some (specifically Domi's answer). – meyi May 25 '18 at 06:05
  • 1
    Does using `width:1em; height: 1em;` not satisfy the demand? Its based on font height, not width, but otherwise you will have to do this using a script. – somethinghere May 25 '18 at 07:20

0 Answers0