如何使文本围绕跟随的浮动元素进行环绕？

Question

HTML：

<div class="heading">
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <a class="action" href="#">Print</a>
</div>

所需的默认外观：

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur adipiscing elit. |

在小屏幕上的期望外观（使用媒体查询）：

| Lorem ipsum dolor sit |
| amet, consectetur     |
| adipiscing elit.      |
| [Print]               |

不需要：

|                            [Print] |
| Lorem ipsum dolor sit amet,        |
| consectetur adipiscing elit.       |

不需要：

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur                  |
| adipiscing elit.                   |

备注：

• 文本可以任意长。
• 动作元素是固定高度和可变宽度的。

我认为仅使用 CSS 无法做到这一点。

现在我使用 JS (Harvey lib) 将浮动的 DOM 元素放在大屏幕上的文本之前。

有什么想法吗？

/// EDIT - 转为回答（抱歉弄乱了）

Answer 1

没有简单的方法可以在不修改标记的情况下仅使用 CSS 来实现这两种结果。不过，您可以使用一些技巧来尝试模仿您想要的行为。

技巧 1：使用绝对定位

将链接设置为position:absolute;top:0;right:0;（如果需要，将容器设置为position:relative;）。然后，使用.text::before{display":block;content' ';float:right;} 在将出现打印链接的位置留出空隙。

技巧 2：双重链接

您可以在<h2> 之前/中放置一个链接，以便在大型显示器上向右浮动，然后隐藏它并在小型显示器上的文本下方显示（以前隐藏的）第二个链接作为块元素。

Answer 2

感谢上面的建议，我最终决定打破纯语义结构并将.action 元素放在.text 之前，因此它可以通过适当的文本换行轻松浮动。在 .action 元素大小的约束下，添加小屏幕所需的行为非常容易：

cssdeck.com/labs/epcoxk7o

HTML：

<div class="heading">
  <a class="action" href="#">Print</a>
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>

CSS：

.action {
  float: right;
  line-height: 20px;
  padding: 5px 70px;
  background: #eee;
}
.text {
  line-height: 30px;
}

@media (max-width: 30em) {
  .heading {
    position: relative;
    padding-bottom: 20px;
  }
  .action {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

@cimmanon 建议的其他解决方案是：cssdeck.com/labs/9bntxaro