Javascript 圆圈内的文本div.div大小根据内容调整

我想创建一个包含文本的圆div（而不仅仅是一行）。这就是我想要的行为：

我想我可以通过

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

但是如果我不知道高度和宽度呢

如果文本正在填充，我希望圆圈展开（最小尺寸100px）

HTML:

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

*
{
    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;
}

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);

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());

JQuery:

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

*
{
    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;
}

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);

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());

因为单词之间的空格，以及它们是如何断裂的。。此解决方案可能会在小文本上出现错误

相同的HTML和CSS，脚本中有细微的更改 更好的解决方案（效果更好） 即使是小文本）

JQuery:

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

*
{
    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;
}

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);

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());

我重复这句话的原因是什么

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

---

这是因为我用得越多，我就越能更好地调整文本的跨度。（使圆圈围绕文本更紧）

希望这对您有所帮助，但请注意，这并不保证所有内容都在圆圈内

我将创建一个div和一个指向内容的span：

然后我会应用CSS来给div加上一个半径，使它看起来像一个圆。跨度的垂直对准应将其置于中间。

<div>
<span>Content goes here</span>
</div>

您可以在此处进行测试：

纯CSS：

---

这是我能想到的最好的了。它不是100%像我想要的那样工作，但它也不太远

HTML

Javascript

var fix_size = function(ball){
    var size = ball.height()+10;
    ball.width(size).height(size);
};

$.each($('.ball'), function(index, ball){
        fix_size($(ball));
});

下面是一个JSFiddle来演示它

---

连字符在我的应用程序中起作用，但在JSFIDLE中不起作用。

断字：全部断字。
对于任何只为一个单词寻找解决方案的人，我只找到了一个css，但它需要重复该单词两次-使用一个作为度量。然后通过填充完成比率


.circlecont{
位置：绝对位置；
顶部：10px；
左：10px；
颜色：#fff；
框大小：边框框；
颜色：白色；
字体大小：10px；
}
.circlecont.circle{
位置：绝对位置；
排名：0；
左：0；
背景色：#CE3838；
宽度：计算（100%+10px）；
身高：0；
填料底部：钙（100%+10px）；
边界半径：50%；
}
.circlecont.测量{
不透明度：0；
}
.circlecont.centeredtext{
颜色：#fff；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
11111111111111111111
我发现使动态div具有相同的高度和宽度有问题。不用脚本也可以完成，但会很混乱。看看哦，这看起来很有希望@YuriyGalanterYuriy的链接可能是你最好的选择。这是一个纯粹的HTML/CSS解决方案，但它也很混乱，需要指定的高度和宽度来适合您的内容：这有点糟糕，但我想我还是会发布它，因为它实际上将文本包装成圆形。哈哈哈。这一次你肯定需要JS！哦，我有一只小虫子在那里。让我再试一次。准备好后我会发表评论。编辑我的答案。现在检查一下，这正是我想要的。你有没有可能让文字表现得像图片中的一样？我试过了，但没能做到。我相信用当前的CSS/HTML规范是无法实现的（如果不打破简单的布局，使用大量的浮动div等等…）。文本必须围在圆圈内的一个矩形内。这绝对是我在网上看到的最好的解决方案——无数代码示例对于提供的有限内容来说都很好，但一旦添加另一行文本，就会开始扭曲。无论添加了多少文本，您的内容都能完美地扩展，这正是我所需要的。太好了。我现在就是这么做的，但正如你提到的：这并不能保证所有内容都在圆圈内，我的问题在于固定宽度和高度。固定宽度和高度。对于长消息，它不会像预期的那样扩大大小，而只是在高度上