円内のテキストを増やしながら円を増やすにはどうすればよいですか？

Question

円の中にテキストを入れたい。テキストが増加したときに円のサイズを動的に増やすことは可能ですか？
This is an example。
しかし、この例の私の問題は、テキストだけで幅が増えることです。

例えば

.badge { 
 
    background:    radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -moz-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -ms-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -o-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -webkit-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
    background-color: red; 
 
    border: 2px solid white; 
 
    border-radius: 12px; /* one half of ((border * 2) + height + padding) */ 
 
    box-shadow: 1px 1px 1px black; 
 
    color: white; 
 
    font: bold 15px/13px Helvetica, Verdana, Tahoma; 
 
    height: 16px; 
 
    padding: 4px 3px 0 3px; 
 
    text-align: center; 
 
    min-width: 14px; 
 
} 
 

 
/* only needed for this sample */ 
 
.badge { 
 
    float: left; 
 
    left: 25px; 
 
    margin: 6px; 
 
    position: relative; 
 
    top: 25px; 
 
}

<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>

Answer 1

私はあなたが幅を一致させるために高さを調整するためにJavaScriptを使用する必要があると思います。ボーダー半径に50％を使用する必要があります。私はyour exampleを変更しました。

$(document).ready(function(){$('.badge').each(function(){ 
 
    $(this).height($(this).width()); 
 
    $(this).css('line-height', $(this).height()+'px'); 
 
})});

.badge { 
 
    background:    radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -moz-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -ms-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background:  -o-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
     background: -webkit-radial-gradient(5px -9px, circle, white 8%, red 26px); 
 
    background-color: red; 
 
    border: 2px solid white; 
 
    border-radius: 50%; /* one half of ((border * 2) + height + padding) */ 
 
    box-shadow: 1px 1px 1px black; 
 
    color: white; 
 
    font: bold 15px/13px Helvetica, Verdana, Tahoma; 
 
    height: 16px; 
 
    padding: 3px; 
 
    text-align: center; 
 
    min-width: 16px; 
 
} 
 

 
/* only needed for this sample */ 
 
.badge { 
 
    float: left; 
 
    left: 25px; 
 
    margin: 6px; 
 
    position: relative; 
 
    top: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">44</div> 
 
<div class="badge">55</div> 
 
<div class="badge">666</div> 
 
<div class="badge">777</div> 
 
<div class="badge">8888</div> 
 
<div class="badge">9999</div>