如何围绕非矩形图像包装文本？

Question

是否可以围绕非矩形图像包装文本？

我希望不同国家/地区的地图周围的文字能够围绕国家的形状进行包裹，即使边界本身不是直的，文本也始终与国家的边界​​保持相同的距离。

这可能吗？

Answer 1

你可以使用this method浮动div来阻挡形状的区域。

所以 - 答案是“是的 - 它可以完成”。但据我所知，没有“简单”的方式，如CSS“文本换行”选项。

Answer 2

看起来这种支持即将到来。

正如Dave所说，有CSSTextWrapper，这可能是目前最好的方法，但是relatively recent W3C working draft概述了使用SVG和光栅图像使用更复杂形状的方法用轮廓检测​​。

在主流浏览器中实现它需要多长时间，更不用说完成了，这是任何人的猜测。

此刻，它可以很难完成。幸运的是，将来会更容易。

Answer 3

有一个名为Bagon的jQuery插件，旨在实现这一目标。

Answer 4

正如其他人已经说过的那样：是的，它可能......但它并不那么困难。

客户倾向于喜欢这种或包装，最后我为它制作了一个脚本：http://www.miguel-svq.com/textwrap.html

这可以根据您的喜好使用浮动div或切片图像。