1

我想实现以下目标：

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

在此处输入图像描述

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

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

4

1 回答 1

0

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

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>

于 2013-10-14T21:48:35.883 回答