Javascript 在不规则形状中包装文本

我想知道是否有任何人都知道的库可以处理自定义形状中的包装文本

我正在尝试为一个朋友网站建立一个模块，该网站处理珠宝雕刻。此模块需要能够实时预览客户在产品上的文本

由于珠宝有不同的形状和大小，我需要一种方法将输入的文本包装到不同的自定义形状中，如下图所示

我已经用JavaScript编写了一个原型，它在大部分情况下都能工作，但是它的边缘非常粗糙，我希望有一种更为尝试和测试的方法来代替它

我需要使这在尽可能多的浏览器上工作。

---

任何帮助都将不胜感激

如注释中所述，基本上通过使用CSS属性，不使用JavaScript就可以实现此效果

工作原理 下图显示了重要元素（我的web inspector的屏幕截图）：

创建一个

.wrapper

元素，该元素包含一个SVG元素、两个形状元素和一个文本段落。根据您的形状，您可以将SVG元素定位为绝对，并为其指定比文本段落更低的

z索引

由于
shape outside
属性与
float
相结合，文本包装本身是可能的。一种可能的解决方案是创建元素，给它们一个与SVG形状紧密匹配的外部形状，并让它们向左和向右浮动，例如文本位于中间，并在两侧换行

这种方法的好处是，无需进一步计算，文本将根据形状进行包装。您甚至可以缩放包装器元素，并且由于百分比值，形状将相应地缩放坏的是，您必须为每个产品创建一个对应的CSS形状，并且必须处理不适合该形状的文本（这可以通过
溢出：隐藏；
轻松解决）。甚至在这个问题被问到一年后，结果也不是很好。但您可以使用相应的供应商前缀（例如，
-webkit-shape-outside
）。现在

工作示例

.wrapper{
位置：相对位置；
宽度：400px；
高度：300px；
填充顶部：50px；
}
.背景{
位置：绝对位置；
z指数：0；
顶部：-65px；
左：28px；
变换：旋转（-45度）；
宽度：90%；
}
p{
位置：相对位置；
z指数：1；
文本对齐：对齐；
字号：1.6em；
字体系列：Helvetica，Arial；
保证金：0；
}
.形状{
宽度：50%；
身高：100%；
}
.左{
外部形状：多边形（0.0,0.100%，100%100%，100%95%，20%40%，10%20%，20%0）；
浮动：左；
}
.对{
外部形状：多边形（100%0、100%100%、01100%、095%、80%40%、90%20%、80%0）；
浮动：对；
}

Lorem ipsum dolor sit amet，奉献精英。该官员阻碍了自由，但不包括该地区的居民。同侧阴唇

您需要使用来实现这一点。然后需要使用JavaScript将计算结果写入CSS本身。感谢您的回答，我在研究如何实现这一点时确实看到了CSS形状，但我认为我了解到它与旧浏览器不太兼容？这是最好的选择吗？是的，CSS形状可能是你最好的选择。您可以尝试SVG，但可能会更多。你不能简单地更新标记，你必须更新源文件并重新输出。你也可以使用canvas 2D上下文，多亏了measureText方法来决定何时打破它，但是如果你在Mozilla中根据窗口大小等来更新它，速度会很慢（不久前我尝试了一款甚至MS Edge也可以）。但最简单的方法是使用SVG和CSS。