如何根据其中的文本使div的长度舍入？

Question

我正在尝试在舍入的div元素内添加文本：

<div class='roundText'>
        Hi there!
</div>

和CSS

.roundText {
    width: 60px;
    height:60px;
    border-radius: 50%;
    border-radius: 10px solid #94BBEB;
    background: #ddd;
}

有什么办法吗？ 演示

Answer 1

的jsfiddle

取下width并替换为：

display:inline-block;

看起来好像不合适，因为它在顶部，但是如果您放置样式：

如果需要，您需要一些javascript：

的jsfiddle

您需要删除height css属性，然后获取框的宽度并将其高度设置为相同的高度，以使其成为圆形。

var round = document.getElementsByClassName("roundText")[0];
var width = round.offsetWidth;
round.style.height = width+"px";

然后，如果您希望文本居中（在高度和宽度上），则可以添加以下样式：

text-align:center;

但是，由于javascript是动态调整高度，因此您需要添加更多JS来设置行高。

这是：

round.style.lineHeight = width+"px";

的jsfiddle

Answer 2

添加高度为div的line-height并将text-align设置为center

.roundText {
    width: 60px;
    height:60px;
    border-radius: 50%;
    border-radius: 10px solid #94BBEB;
    background: #ddd;
    line-height : 60px;
    text-align : center;
}

Answer 3

通过display:inline-block; 和一些padding也可以得到这个结果。 DEMO

line-height并且还调整了border-radius 。