Làm cách nào để tăng vòng kết nối cùng với việc tăng văn bản trong vòng kết nối?

Question

Tôi muốn có văn bản bên trong một vòng tròn. Có thể tăng kích thước của vòng tròn khi văn bản tăng lên không?
This is an example.
Nhưng vấn đề đối với tôi trong ví dụ này là chỉ có chiều rộng tăng cùng với văn bản.

ví dụ

.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

Tôi nghĩ rằng bạn cần phải sử dụng javascript để điều chỉnh chiều cao để phù hợp với chiều rộng; bạn cũng nên sử dụng 50% cho bán kính đường viền. Tôi đã sửa đổi 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>