Javascript 绕着一个圈

我想把两个div的文本围成一个圆。我已经创建了我的div和圆圈。现在，我想知道如何包装测试。似乎什么也做不到

.blackbox{
宽度：600px；
高度：400px；
利润率最高：12%；
左边距：自动；
右边距：自动；
背景色：黑色；
填充：35px；
显示：块；
线高：2.8em；
字体大小：13px；
}
.中心img{
宽度：200px；
高度：200px；
显示：内联块；
浮动：左；
背景：#f00；
边界半径：50%；
}
.左{
宽度：33%；
利润率最高：3.5%；
颜色：白色；
显示：内联块；
浮动：左；
文本对齐：右对齐；
}
.对{
宽度：33%；
利润率最高：3.5%；
颜色：白色；
显示：内联块；
浮动：左；
文本对齐：左对齐；
}

我们相信，一个伟大的品牌是一个富有同情心的品牌，与影响周围人的因素相协调。伟大的品牌积极倾听，深思熟虑地回应。他们不想表现得真诚，他们是真诚的。
你可以成为《财富》500强企业、非营利组织、科技初创企业或时尚品牌，在做正确的事情的同时保持竞争力并取得成功。认识到每一次努力的价值

如果你觉得不错，我们开始工作吧。
使用
letting.js

试试这个

插件取自
我用javascript编写了一个版本，因为如评论中所述，任何CSS解决方案都很可能对浏览器的支持有限

在我的演示中，我更改了一些文字，以更好地说明包装。我还提供了
div
元素
id
s，并调整了CSS

要使用，您需要将两个
jQuery
对象传递给
wrapToCircle（）
，第一个是要包装的文本，另一个是充当圆的元素。对于您的演示，这看起来像：

$（函数（）{
圈圈（$（“.left”），$（“.cirle img”）；
圈圈（$（“.right”），$（“.cirle img”）；
});

它假定“圆”元素的中心在中间，并且它的直径是它的宽度（……或高度-如果元素是矩形的，则哪个更小）。

$（函数（）{
//调用wrapToCircle（要包装的div，要跟随的相邻圆）
圈圈（$（“#左”），$（“#圆环img”）；
圈圈（$（“#右”），$（“#圆环img”）；
});
函数wrapToCircle（$elementToWrap，$aroundElement）{
var elementtowrapos=$elementToWrap.offset（）；
var aroundelementcenter={}
var radius=Math.min（$aroundElement.width（）/2，$aroundElement.height（）/2）；
aroundelementcenter.left=$aroundElement.offset（）.left+（$aroundElement.width（）/2）；
aroundelementcenter.top=$aroundElement.offset（）.top+（$aroundElement.height（）/2）；
var text=$elementToWrap.text（）.split（“”）；
var wrappedText=''；
var字宽=[]；
var isToTheRightOfCircle=$elementToWrap.offset（）.left>aroundelementcenter.left；
$（文本）。每个（函数（idx，元素）{
wrappedText+=''+elem+''；
});
wrappedText+=''；//换行文本，以空格结尾，以测量宽度
$elementToWrap.empty（）.append（wrappedText）；
$elementToWrap.find（“span”）。每个函数（idx，elem）{
wordWidths.push（$（this.width（））；
});
var$space=$elementToWrap.find（'span'）.last（）；
var spaceWidth=$space.width（）；
$space.remove（）；
var widthToWrapTo=$elementToWrap.width（）；
var currentLine=''；
var currentLineWidth=0；
$elementToWrap.empty（）；
var curEl=$（“）.appendTo（$elementToWrap）；//需要默认内容才能获得高度
var textHeight=curEl.height（）；
var调整宽度=0；
调整宽度=计算宽度（围绕中心、曲线、文本高度、半径、宽度到环向）；
currentLine=“”；
//重复单词
$（文本）。每个（函数（idx，元素）{
if（当前线宽+字宽[idx]+空格宽度半径）{
返回宽度ToRapto+半径；
}否则{//垂直方向上，该文本位于cirlce的顶部和底部边界内
返回宽度到Rapto+（半径-findX（从圆心的高度，半径））；
}
}
.blackbox{
宽度：600px；
高度：400px；
利润率最高：12%；
左边距：自动；
右边距：自动；
背景色：黑色；
填充：35px；
显示：块；
线高：2.8em；
字体大小：13px；
}
.中心{
宽度：200px；
高度：200px；
浮动：左；
}
.中心img{
宽度：200px；
高度：200px；
背景：#f00；
边界半径：50%；
}
.左{
宽度：33%；
利润率最高：3.5%；
颜色：白色；
显示：内联块；
浮动：左；
文本对齐：左对齐；
右侧填充：5px；
}
.对{
宽度：32%；
利润率最高：3.5%；
颜色：白色；
显示：内联块；
浮动：左；
文本对齐：右对齐；
左侧填充：5px；
}

我们相信，一个伟大的品牌是一个有用的品牌，它能影响周围的人。伟大的品牌会积极倾听并深思熟虑地做出回应。他们不会试图表现出真诚——他们是真诚的……下面是更多的文字
在这个圈子里。
你可以成为《财富》500强企业、任何非营利组织、科技初创企业或时尚品牌，在做正确的事情的同时保持竞争力并取得成功。认识到每一次努力的价值。如果你觉得这很好，让我们做对吧
现在。
这就是
shape outside
（，）的用途。目前在支持部门，Firefox支持“正在开发中”和Edge“正在考虑中”，可以在生产中使用


正文{
文本对齐：居中；
}
body[简单容器]，
体h2{
最大宽度：800px；
保证金：0自动；
文本对齐：左对齐；
}
[路径父项]{
显示器：flex；
}
[path parent]p{
溢出x：隐藏；
文本对齐：对齐；
填充：0 10px；
}
h2{填充：0 10px；}
[循环路径]{
浮动：对；
宽度：400px；
高度：400px；
外部形状：圆形（100%50%时为50%）；
形状裕度：10px；
职位：re