javascript - Text within circle div. Div size adjusted to content

Question

I want to create a circle div with text in (not only one line). This is the kind behavior I want:

That I guess I can achieve with a

text-align: center;
vertical-align: middle;

But what if I don't know the height and width?

I want the circle to expand (min-size 100px) if the text is filling it up.

Answer 1

So here is the clean Script way.

HTML:

<div><span>Your text</span></div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
div
{
    display: inline-block;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;
}
    div:before
    {
        content: '';
        display: inline-block;
        height:100%;
        vertical-align: middle;
    }

span
{
    vertical-align: middle;
    display: inline-block;
}

JQuery:

var width = Math.sqrt($("span").width() * $("span").height());
var sqrt2 = Math.sqrt(2);
$("span").height(width);
$("span").width(width);
$("div").width(sqrt2 * width);
$("div").height(sqrt2 * width);

because of spaces between the word, and how they break.. this solution may bug on small texts.

same HTML & CSS, minor changes in Script

Here's a better solution (works better even with small texts)

JQuery:

var div = $("div");
var span = $("span");

span.width(Math.sqrt(span.width() * span.height()));
span.width(Math.sqrt(span.width() * span.height()));
div.width(Math.sqrt(2) * span.width());
div.height(div.width());

the reason that I repeat that line

span.width(Math.sqrt(span.width() * span.height()));

its because the more I use it, the better I scale of the span around the text. (causing the circle to be tighter around the text)