Html 如何在增加圆圈内文本的同时增加圆圈？

我想把文字放在一个圆圈里。文本增加时，是否可以动态增加圆圈的大小？
.
但在这个例子中，我遇到的问题是，只有宽度随着文本的增加而增加

e、 g

.badge{
背景：径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：莫兹径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-ms径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-o-径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-webkit径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景色：红色；
边框：2倍纯白；
边框半径：12px；/*一半（（边框*2）+高度+填充）*/
盒影：1px 1px 1px黑色；
颜色：白色；
字体：粗体15px/13px Helvetica，Verdana，Tahoma；
高度：16px；
填充：4px 3px 0 3px；
文本对齐：居中；
最小宽度：14px；
}
/*仅此样本需要*/
.徽章{
浮动：左；
左：25px；
利润率：6px；
位置：相对位置；
顶部：25px；
}

1
2.
3.
44
55
666
777
8888
9999

我认为您需要使用javascript来调整高度以匹配宽度；边界半径也应使用50%。我改了

$（document）.ready（function（）{$（'.badge'）。each（function（））{
$（this）.height（$（this）.width（））；
$（this.css（'line-height'，$（this.height（）+'px'）；
})});
.badge{
背景：径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：莫兹径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-ms径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-o-径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景：-webkit径向梯度（5px-9px，圆形，白色8%，红色26px）；
背景色：红色；
边框：2倍纯白；
边框半径：50%；/*一半（（边框*2）+高度+填充）*/
盒影：1px 1px 1px黑色；
颜色：白色；
字体：粗体15px/13px Helvetica，Verdana，Tahoma；
高度：16px；
填充：3倍；
文本对齐：居中；
最小宽度：16px；
}
/*仅此样本需要*/
.徽章{
浮动：左；
左：25px；
利润率：6px；
位置：相对位置；
顶部：25px；
}

1.
2.
3.
44
55
666
777
8888
9999
或者如果您使用特定字体，您可以提前知道所有内容的宽度（和高度）。@reisio:仅当您提供下载的位图字体时。人们确实有不同版本的字体，操作系统呈现的字体也不同。（后者中最为人所知的是：OSX通常遵循给定的字体大小，这使得它们看起来比Windows上的要小，而在Windows上，pt中给定的字体大小通常是按我永远记不起来的系数放大的。）没有任何类型的字体，只要您提供就行。操作系统之间的微小渲染差异很容易得到补偿。