像在 Word 中一样将文本环绕在 div 周围答案

【问题标题】：Wrap text around a div like in Word像在 Word 中一样将文本环绕在 div 周围
【发布时间】：2013-10-14 20:33:31
【问题描述】：

我希望实现以下目标：

我想在屏幕中间有一个块元素（div/img），它应该被这样的文本包围：

我知道这个功能存在，例如在 M$ 字中。有没有办法使用 Web 技术（HTML、CSS、JS）来做到这一点？

细节对我的用例来说并不重要，因为我想用文字云包围图像，因此我不介意左右的文本实际上是在列中而不是在行中。

【问题讨论】：

至少在不久的将来是可能的。有一个 CSS（排除）的实现，但它没有被批准并且是高度实验性的。事实上，您必须在浏览器中专门打开该选项，即使它们支持它......大多数都不支持。
这正是我要说的。有没有办法用 JavaScript 做到这一点？
我会尝试使用表格元素使用 3x3 网格来完成，并将图像放在中心单元格中。

标签： javascript html css text word-wrap

【解决方案1】：

这是一种蛮力解决方案，但可能会给你一个想法。

html, body {
  height: 100%;
  text-align: justify;
}

.text:after {
  content: "Lorem ipsum drbi posuert, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesqu adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper non";
}

.left, .right {
  width: 33%;
  display: inline-block;
  height: 200px;
  overflow: hidden;
}

img {
  width: 31%;
  max-height: 200px;
}

<div class="text"></div>
<div class="text left"></div>
<img src="https://i.stack.imgur.com/bVAmG.gif">
<div class="text right"></div>
<div class="text"></div>

【讨论】：

我喜欢你的想象力，我意识到这只是一个例子，但对于每个人都可以从中得到任何想法：你不应该永远将内容放在这样的样式表中。
谢谢。经过很长时间的摆弄，我决定自己实施这个解决方案。但是，由于我的下一个要求是文本是可变的，因此我不能将其静态拆分为这些区域。目前，我正在扩展您的想法，计算文本中的单词并根据各个
所涵盖的区域进行粗略的四向拆分。（使用 jQuery 计算高度和宽度，为每个 div 相乘，使用值根据字数进行拆分）您认为基于字符数的拆分会更好吗？
有一种精确测量文本的技术。您基本上将字符串渲染到屏幕外或隐藏的元素（宽度：自动），然后向 DOM 询问其大小。所以你可以得到你想要的精确度。