Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase a circle along with increasing the text inside the circle?

Tags:

html

css

I want to have text inside a circle. Is it possible to dynamically increase the size of the circle when the text increases?
This is an example.
But the problem for me in this example is that only the width increases along with the text.

e.g

.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>
like image 847
khurram Avatar asked May 09 '12 05:05

khurram


People also ask

How do I draw a circle around text in CSS?

Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius. This solution always renders a circle, regardless of content length.


1 Answers

I think you need to use javascript to adjust the height to match the width; you should also use 50% for the border-radius. I have modified 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>
like image 178
demonic Avatar answered Nov 15 '22 01:11

demonic