我正在尝试实现一个用户可以动态输入文本和上传图像的界面。我希望界面具有以下功能：
我怎么能做到这一点？我查看了一些jquery脚本，并查看了HTML5的canvas功能，但无法找到解决方案。
感谢您的时间。
编辑：此视频显示了我希望获得的效果：
答案 0 :(得分：17)
这是CSS历史上多次讨论的常见且理想的功能，并且正在开发一种规范以使其成为可能。不幸的是，实现很少而且很远，而且一些实现者不愿意在它上面工作。对任何非平凡的布局来说，使用JavaScript是一个复杂的问题;这样的解决方案不太可能足够快，您可以快速接近PDF-to-HTML转换器所期望的那种标记。
这里有两个问题：不规则的文本流，并从页面的任意区域中排除文本和其他内联元素。
这不是第一次为CSS讨论这两个功能。特别是1996年，不规则浮动形状周围的流动文本是mentioned in a CSS level 1 working draft，而Eric Meyer的ragged float demo至少可以追溯到2002年。这是一个早该推出的功能！
2007年6月，James Elmore建议在position属性中添加float值，使元素可以在页面上任意定位，同时排除其他元素在下面流动。
SVG 1.2最初为flowed text regions指定了一个模型，并详细介绍了如何实现它。不幸的是，latest version of the spec（仍处于开发阶段）通过注意到之前的工作将被“SVG 1.2 Tiny textArea功能的超集”取代而将其从水中吹走。
最近，我们有CSS Exclusions specification，proposal from Adobe以及您在该视频中看到的内容。截至2012年8月，这些已在IE 10 RTM中实施，并且正在WebKit中慢慢推出，但为其他供应商工作的开发人员已就该提案表达mixed feelings。*
Adobe维护handy support matrix以便于参考。
使用JavaScript很难实现类似的效果，更难以有效地实现。我可以想到两种非常天真的方法，为一个地区的绝对定位元素腾出空间：
span来“阻挡”元素的空间;或span元素围绕每个单词，并单独设置每个单词的样式，以便使用填充为排除的元素腾出空间。我已经了解了第二种方法可行的a very broken demo。它太可怕了，马车很容易打破。实际上我在回答这个问题后花了几周的时间来处理Exclusion规范的polyfill，但是因为有太多的bug和性能问题而放弃了。
任何一种方法都会遇到无数问题：列，文本对齐，错误的子元素（特别是浮动或定位的元素！），各种边缘条件，如果你改变HTML的话，可能会发生可怕的事情，连字符 - 仁慈的天堂，我不知道甚至想要思考关于连字符 - 当然，考虑到这些事情之后，可能会出现很大的性能问题。
性能问题可以在某种程度上得到改善;例如，我使用elementFromPoint尝试直接获取包含第一个重叠单词的span，有些浏览器甚至支持caretPositionFromPoint，这也可能有所帮助。我认为通过大量的工作，你可以制作一些非常适合静态内容的东西;但要足够快，你可以用鼠标拖动它？我的演示页面包含了很少的内容，并没有解决您在真实网页上进行此项工作时遇到的任何令人费解的复杂问题。即使你可以解决所有这些问题，让它足够快以顺利拖延也是非常具有挑战性的。
*我强烈希望供应商实施CSS排除。自CSS早期以来，人们一直在寻求这些功能，它在屏幕和印刷品上都是一种常见且合法的视觉设计目标。
答案 1 :(得分：6)
这可以在IE10中使用定位浮点数：http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
其他浏览器尚未支持此功能。
答案 2 :(得分：6)
好吧，至少对于包装，如果你想使用jQuery，你可以使用这个jQSlickWrap插件让文本环绕不规则形状的图像。它使用了漂亮的HTML5画布技术。
请参阅此处的文字换行示例：http://www.jwf.us/projects/jQSlickWrap/example2.html
希望它有所帮助！