The script adds numbers to the circle, and when the number becomes more than 9 and more than 99, the circle flattens - the disc is already formed. Tell me, pzhl. How styles can be made so that the circle always remains around with any number of digits. https://jsfiddle.net/sbmmex4h/

.span1, .span2, .span3{ display: inline-block; background: #ccc; color: #000; text-align: center; border-radius: 50%; padding: .3em .65em; } 
 <span class="span1">1</span><br/><br/> <span class="span2">10</span><br/><br/> <span class="span3">100</span>

  • repeat the problem in the feedl please, the circle can be drawn in many ways and it is not clear what method you need - Jurij Jazdanov
  • @JurijJazdanov, the span will be one and different numbers will be inserted into it (presumably up to 1k) - Vlad

2 answers 2

This example does not fit my task, as the cell is less than 2em. I wish the figures were not adjacent to the edges of the circle.

then this option:

 .container { display: inline-block; position: relative; } .span { display: inline-block; background: #ccc; color: #000; text-align: center; border-radius: 50%; padding: 50% 0; width: 100%; position: absolute; transform: translateY(-50%); } .text { position: relative; top: -.5em; padding: 0em 0.65em; } 
 <br><br> <div class=container><span class="span"></span><span class=text>1</span></div> <div class=container><span class="span"></span><span class=text>10</span></div> <div class=container><span class="span"></span><span class=text>10000</span></div>

  • - thanks, that is necessary ... - Vlad

Just specify the size and remove the indentation:

  width:2em; height:1em; padding: 0.5em 0;

( 1em - font height)

 .span1, .span2, .span3{ display: inline-block; background: #ccc; color: #000; text-align: center; border-radius: 50%; padding: 0.5em 0; width:2em; height:1em; } 
 <span class="span1">1</span><br/><br/> <span class="span2">10</span><br/><br/> <span class="span3">100</span><br/><br/> <span class="span3">1000</span>

  • And if you insert the figure of 10,000? - Raz Galstyan
  • This example does not fit my task, as the cell is less than 2em. I wish that the figures were not adjacent to the edges of the circle. - Vlad