像在Word中一样在div周围包装文本

Question

我想实现以下目标：

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

我知道这个功能存在，例如用M $ Word。有没有办法用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="https://i.stack.imgur.com/bVAmG.gif">
<div class="text right"></div>
<div class="text"></div>