jquery - 使用 css/jquery/anything 围绕透明 png 排列文本

Question

现在，我有：

<img style="float:right;" src="/path/to/image.png">
<p>lorem ipsum dolor</p>

这很好地设置了图像和它周围的文字。但是，是否可以在 png 图像的实际内容周围“流动”文本，而忽略透明度？

现在看起来像这样：

我希望它看起来像这样：

我看到的可能性：

1) Manually add breaks

动态内容几乎不可能；

2) Have php add breaks after a set number of characters

非常复杂，需要为每个图像确定；

3) Another way someone here knows about

有没有人遇到过这种情况？

提前致谢！

Answer 1

执行此操作的“正确”方法是CSS3 形状/排除（形状外部/内部等）。

不幸的是，截至 2013 年 4 月，这些尚未得到广泛实施。Chrome/Webkit 在其金丝雀版本中进行了测试。也许 Mozilla 会继续跟进。

Answer 2

我能想到的在不硬编码任何东西的情况下将文本包装在图像周围的唯一可能的方法是寻求 jQuery 的帮助。有一个名为jQSlickWrap的插件- 它可能是您正在寻找的解决方案。但是，它确实需要代表浏览器的 HTML5 支持，因此它目前不适用于 IE 用户。

Answer 3

任何自动断点检测都将涉及非常复杂的边缘检测、文本度量和流计算，这些都太复杂而收效甚微。

我想到的唯一可行的方法是使用一些覆盖图像的浮动框 (DIV) 手动近似图像（使用 HTML+CSS）。

Answer 4

这绝对是可能的。您只需要创建高度等于文本的行高和您希望文本中断的宽度的空白元素。然后将这些元素浮动在您的文本中，使用clear: bothCSS 样式，并让您的图像绝对定位，并在文本下方使用 z-index。