Javascript 如何使文本适应椭圆文本区域或文本输入元素

我想在html php和js（jQuery UI）中开发一个漫画编辑工具，我需要一种方法使文本自动适应语音气泡，这是一个椭圆形文本区域或文本输入（边界半径为50%）。 我在css形状周围发现了很多东西，但它看起来像是内部的

形状

，这对我的情况来说是完美的，不再有效了。 有没有办法做到这一点？

演示有：

• contenteditable

  fieldset

• 叫喊和思考的不同课程

• 使用

  fit content

  与内容保持一致，并在用户键入内容时进行扩展。

演示

.bubble{
字体：400 100%/1.5“建筑师之女”，草书；
位置：相对位置；
边界半径：45%；
宽度：适合的内容；
填充：.75em 1.5em；
z指数：1；
背景：#fff；
边缘：1米；
文本对齐：居中；
}
.思想{
位置：绝对位置；
底部：-25px；
}
.大叫{
字体：400 1.5rem/1.1冲击；
}
.耶尔传奇{
字体系列：Arial
}
.说{
位置：绝对位置；
底部：-.8em；
}
.fromCenter{
左：50%；
变换：旋转（160度）
}
.左{
变换：旋转（150度）；
}
fromRight先生{
右：0；
变换：旋转（60度）
}
.右面板{
浮球：对
}

绿巨人粉碎！！！
Λ
我的蜘蛛感觉很刺痛！
噢
我是我所做的最好的，但我做的最好的并不很好。
噢

嘿，你可以发布你的尝试吗？你可以尝试使用shape outside：我已经考虑过了，但我更喜欢一种有效的方法，如果它存在的话。使用

形状外部

将需要大量计算，与

形状内部

应该做的相比。这很有趣，如果我没有找到一种方法来做我想做的事情，我可能会使用它，那就是使文本适应椭圆，椭圆的大小实际上是可编辑的，而不是相反。我明白了，也许可以尝试在SVG或画布上覆盖一个无边界的文本区域？我想这样做，但实际上我不需要视觉。。。这样更容易…：[