使用css / jquery / anything在透明的png周围流动文本

现在,我有:

 

lorem ipsum dolor

这很好地设置了正确的图像和周围的文字。 然而,是否可以围绕png图像的实际内容“流动”文本,忽略透明度?

它现在看起来像这样:

之前

我希望它看起来像这样:

后

我看到的可能性:

 1) Manually add breaks 

动态内容几乎不可能;

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

非常复杂,需要为每个图像确定;

 3) Another way someone here knows about 

有没有人有这种情况的经验?

提前致谢!

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

“正确”的方法是CSS3形状 / 排除 (形状 – 外部/内部等)。

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

任何自动断点检测都将涉及非常复杂的边缘检测,文本度量和流量计算,这些都很复杂,收益很小。

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

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