6

円の中にテキストを入れたい。テキストが増えたときに円のサイズを動的に大きくすることは可能ですか?
これは一例です。
しかし、この例での問題は、幅だけがテキストと共に増加することです。

例えば

.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>

4

1 に答える 1

7

幅に合わせて高さを調整するには、JavaScriptを使用する必要があると思います。また、border-radius にも 50% を使用する必要があります。私はあなたの例を修正しました。


$(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>

于 2012-05-09T06:08:59.940 に答える