javascript - 像在 Word 中一样将文本环绕在 div 周围

Question

我希望实现以下目标:

我想要一个 block 元素 (div/img) 在屏幕中间，它应该被这样的文本包围:

我知道这个功能存在，例如在 M$ 字。有没有一种方法也可以使用 Web 技术(HTML、CSS、JS)来做到这一点？

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

Answer 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="/image/bVAmG.gif">
<div class="text right"></div>
<div class="text"></div>