问如何将文本环绕在可移动的图像上？

EN

TL;DR

这是CSS历史上曾多次讨论过的一个常见且可取的特性，并且正在开发一个规范以使其成为可能。不幸的是，实现很少，而且距离很远，一些实现者不愿意在上面工作。对于任何非平凡的布局来说，使用JavaScript都是一个复杂的问题；对于您的目的来说，这样的解决方案不太可能足够快，而且您将快速接近您期望的PDF到HTML转换器中的标记类型。

背景

这里有两个问题:不规则的文本流和排除页面任意区域中的文本和其他内联元素。

这不是第一次讨论CSS的两个特性。特别是，关于不规则漂浮形状的流动文本早在1996年就出现在在CSS第1级工作草案中提到，Eric的破烂浮标演示至少可以追溯到2002年。这是一个逾期已久的功能！

2007年6月，James建议将position值添加到float属性中，允许元素在页面上任意定位，同时排除其他元素在页面下面流动。

SVG1.2最初为流动文本区域指定了一个模型，并详细介绍了如何实现该模型。不幸的是，还在开发中的最新版本的规范 (它还在开发中)通过注意到以前的工作将被“SVG1.2微小的textArea特性的一个超集”所取代。

现状(2012年8月修订)

最近，我们有了CSS排除规范，一个Adobe的提案，以及你在视频中看到的。截至2012年8月，这些已在IE10RTM中实现，并正在WebKit中慢慢推出，但为其他供应商工作的开发人员已经表达了复杂的感情的意见。

• 三叉戟(IE):在IE10平台预览中实现，并在RTM中提供。(在IE测试驱动器中称为“定位浮动”，类似于James的提议。)
• WebKit (Chrome，Safari):部分实现了，补丁逐渐被批准登陆WebKit主干，这意味着我们很快就会看到这一点。(Bug 57311 - CSSRegions:在WebKit中添加排除支持.)
• 壁虎(火狐)：不太可能很快实现；错误目前被解决为WONTFIX。(Bug 672053 -添加对CSS3定位浮点数的支持-note David Baron反对互操作性。)
• Presto (Opera):尚未实现。(Bug跟踪器是私密的；我试着问一直喜欢社交的Bruce是否有一个开放的bug，但是他很难对他们的路线图发表评论。)

Adobe维护一个方便支持矩阵以便于参考。

哈奇咳“填充剂”？

使用JavaScript很难达到类似的效果，更难以高效地实现。我可以想到两种非常天真的方法，为区域内的绝对定位元素腾出空间：

1. 使用战略性插入内联span的元素“阻塞”空间；或
2. 用一个span元素包围每个单词，并对每个单词分别进行样式设置，以便为使用填充的排除元素腾出空间。

我已经黑了一个非常坏的演示关于第二种方法是如何工作的。太可怕了，很容易被撞坏。实际上，在回答了这个问题之后，我花了几个星期的时间为排他规范做了一个多填充，但我放弃了，因为有太多的bug和性能问题。

无论采用哪种方法，您都会遇到各种各样的问题:列、文本对齐、错误的子元素(特别是浮动或定位元素！)、各种边缘条件、如果更改HTML、连字符--天啊，我甚至不想考虑连字符--当然，考虑到这些因素后，可能会出现一些性能问题。

性能问题可以有所改善；例如，我使用elementFromPoint尝试直接获得包含第一个重叠词的span，有些浏览器甚至支持caretPositionFromPoint，这也可能有帮助。我认为，通过大量的工作，您可以做一些对静态内容很好的东西，但是让它足够快，您可以用鼠标拖动它？我的演示页面内容很少，不涉及任何令人费解的复杂问题，你必须处理才能在真实的网页上完成这一工作。即使你能解决所有这些问题，让它足够快地顺利地拖曳将是非常具有挑战性的。

*我强烈希望供应商将实施CSS排除。从CSS的早期开始，人们就一直在要求这些特性，这是一个常见的、合法的视觉设计目标，无论是在屏幕上还是在印刷上。

这在IE10中是可能的，使用定位的浮点数：http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html

其他浏览器还没有支持这一点。

那么，至少对于包装，如果您想使用jQuery，您可以使用这个jQSlickWrap插件，让文字环绕不规则形状的图像。它使用了一种不错的HTML5画布技术。

参见这里的文本包装示例：http://www.jwf.us/projects/jQSlickWrap/example2.html

希望能帮上忙！