如何将文本环绕在可移动图像周围？
我正在尝试实现一个用户可以动态输入文本和上传图像的界面。我希望界面具有以下功能：
- 图像应该是可移动的，即能够拖放图像。
- 输入的文本应自动环绕图像。
我怎样才能做到这一点？我查看了一些 jquery 脚本，也查看了 HTML5 的画布功能，但无法找到解决方案。
感谢您抽出时间。
编辑：该视频显示了我希望获得的效果：
I am trying to implement an interface where users can dynamically enter text and upload images. I wish for the interface to have these features:
- The images should be moveable i.e, ability to drag and drop the images around.
- The text entered should automatically wrap around the images.
How could I accomplish this? I have looked at some jquery scripts and also looked through HTML5's canvas features, but am unable to find a solution.
Thanks for your time.
EDIT: This video shows the effect I wish to obtain:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
TL;DR
这是一个常见且理想的功能，在 CSS 历史上已被讨论过无数次，并且正在开发一个规范来使其成为可能。不幸的是，实现的数量很少且相距甚远，并且一些实现者不愿意致力于此。对于任何重要的布局来说，使用 JavaScript 来实现这一点都是一个复杂的问题；这样的解决方案不太可能足够快地满足您的目的，并且您将快速接近您期望从 PDF 到 HTML 转换器获得的标记类型。
背景
这里有两个问题：不规则的文本流以及从页面的任意区域排除文本和其他内联元素。
这并不是第一次讨论 CSS 的这两个功能。特别是，CSS 1 级工作草案中提到了围绕不规则浮动形状的流动文本 早在 1996 年，Eric Meyer 的 ragged float demo 至少可以追溯到 2002 年。这是一个姗姗来迟的功能！
2007 年 6 月，James Elmore 建议向
float属性添加position值，使元素能够在页面上任意定位，同时排除其他元素在下方流动。SVG 1.2 最初指定了流动文本区域的模型，并详细介绍了如何实施这一点。不幸的是，最新版本的规范（仍在开发中）打破了这一点水，指出以前的工作将被“SVG 1.2 Tiny
textArea功能的超集”取代。当前状态（2012 年 8 月修订）
最近，我们有了 CSS 排除规范， Adobe 的提案以及您在该提案中看到的内容 视频。截至 2012 年 8 月，这些已在 IE 10 RTM 中实现，并在 WebKit 中慢慢推出，但为其他供应商工作的开发人员表示 对该提案的复杂感受。*
Adobe 维持方便的支持矩阵以方便参考。
咳咳“Polyfilling”？
使用 JavaScript 很难达到类似的效果，更难以高效地做到这一点。我可以想到两种非常简单的方法来为区域中的绝对定位元素腾出空间：
span为元素“遮挡”空间；或者span元素包围每个单词，并单独设置每个单词的样式，以便使用填充为排除的元素腾出空间。我已经破解了一个非常损坏的演示，说明了第二种方法的工作原理。它太可怕了，有缺陷，而且很容易损坏。实际上，在回答这个问题后，我花了几周的时间来开发排除规范的 polyfill，但由于存在太多错误和性能问题而放弃了。
无论采用哪种方法，您都会遇到无数问题：列、文本对齐、错误的子元素（尤其是浮动或定位元素！）、各种边缘条件、更改 HTML 时会出现的可怕情况、连字符 — 仁慈的老天爷，我什至不想考虑连字——当然，考虑到这些因素后，还可能会出现潜在的巨大性能问题。
性能问题可以得到一定程度的改善；例如，我使用
elementFromPoint尝试直接获取包含第一个重叠单词的span，有些浏览器甚至支持caretPositionFromPoint，这也可能有帮助。我认为通过大量的工作，您可以制作出非常适合静态内容的东西；但让它足够快，你可以用鼠标拖动它？我的演示页面内容很少，并且没有解决任何在真实网页上运行时必须处理的令人费解的复杂问题。即使您可以解决所有这些问题，使其足够快以顺利拖动也将非常具有挑战性。* 我强烈希望供应商实施 CSS 排除。从 CSS 诞生之初起，人们就一直在寻求这些功能，无论是在屏幕上还是在印刷品上，这都是一个常见且合理的视觉设计目标。
TL;DR
This is a common and desirable feature that has been discussed numerous times in the history of CSS, and there is a specification under development to make it possible. Unfortunately, implementations are few and far-between, and some implementers are reluctant to work on it. Doing it with JavaScript is a complex problem for any non-trivial layout; such a solution is unlikely to be fast enough for your purposes and you will fast approach the sort of markup you'd expect from a PDF-to-HTML converter.
Background
There are two questions here: irregular text flow and excluding text and other inline elements from an arbitrary region of the page.
This is not the first time either feature has been discussed for CSS. In particular, flowing text around irregular floated shapes was mentioned in a CSS level 1 working draft back in 1996, and Eric Meyer's ragged float demo dates from at least 2002. This is a long overdue feature!
In June 2007, James Elmore suggested adding
positionvalues to thefloatproperty, enabling elements to be positioned arbitrarily on the page while excluding other elements from flowing underneath.SVG 1.2 initially specified a model for flowed text regions, and goes into some detail on how this would be implemented. Unfortunately, the latest version of the spec (which is still in development) blows this out of the water by noting that previous work will be replaced with "a superset of the SVG 1.2 Tiny
textAreafeature".Current status (revised August 2012)
More recently, we have the CSS Exclusions specification, a proposal from Adobe and what you see being shown off in that video. As of August 2012, these have been implemented in IE 10 RTM and are slowly being rolled out in WebKit, but developers working for other vendors have expressed mixed feelings about the proposal.*
Adobe maintain a handy support matrix for easy reference.
Hackcough "Polyfilling"?
It would be difficult achieve a similar effect using JavaScript, and even more difficult to do it efficiently. I can think of two very naive approaches to make room for an absolutely positioned element in a region:
spans; orspanelement, and style each word individually to make room for the excluded element using padding.I've hacked up a very broken demo of how the second approach might work. It's horrible, buggy and easy to break. I actually spent a few weeks after answering this question working on a polyfill for the Exclusions spec, but gave up because there were too many bugs and performance issues.
You will have myriad issues with either approach: columns, text alignment, errant child elements (especially floated or positioned elements!), various edge conditions, horrible things if you change the HTML, hyphenation—merciful heavens, I don't even want to think about hyphenation—and, of course, potentially magnificent performance issues after taking account of these things.
Performance issues can be ameliorated somewhat; for example, I've used
elementFromPointto try and get thespancontaining the first overlapping word directly, and some browsers even supportcaretPositionFromPoint, which may also help. I think that with a lot of work, you could make something that works pretty well for static content; but making it fast enough that you can drag it around with the mouse? My demo page has precious little content and doesn't address any of the mind-bendingly complex issues you'd have to deal with to make this work on real web pages. Even if you can get around all of those issues, making it fast enough to drag around smoothly would be very challenging.* I strongly hope vendors will implement CSS Exclusions. People have been asking for these features since the earliest days of CSS, and it is a common and legitimate visual design objective both on screen and in print.
这在 IE10 中是可能的，使用定位浮动： http://ie.microsoft.com /testdrive/HTML5/PositionedFloats/Default.html
其他浏览器尚未支持此功能。
This is possible in IE10, using positioned floats: http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
Other browsers have yet to support this.
好吧，至少对于换行来说，如果你想使用 jQuery，你可以使用这个 jQSlickWrap 插件来获取文本环绕不规则形状的图像。它使用了很好的 HTML5 画布技术。
请参阅此处的文本换行示例：http://www.jwf.us/projects/jQSlickWrap/example2.html
希望有帮助！
Well, at least for the wrapping, if you want to use jQuery, you can use this jQSlickWrap plugin to have the text wrap around the irregularly-shaped image. It uses a nice HTML5 canvas technique.
See the text wrap example here: http://www.jwf.us/projects/jQSlickWrap/example2.html
Hope it helps!