html - 如何使文本可环绕跟随的 float 元素？

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.                   |

备注:

• 文本可以很长。
• Action 元素是固定高度和可变宽度。

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

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

有什么想法吗？

///编辑 - 移动到回答(抱歉搞砸了)

Answer 1

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

技巧 1:使用绝对定位

将链接设置为position:absolute;top:0;right:0; (如果需要，容器到 position:relative;)。然后，使用 .text::before{display":block;content' ';float:right;}在将出现打印链接的地方放置一个空隙。

技巧 2:双重链接

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