像在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>