Offscreen Text for Copy & Paste

HTML和CSS之间的关系是特殊的：通过HTML将内容与CSS的演示混合在一起，形成一个很棒的演示。然而，有时您只需要使用CSS技巧来增强功能。这可能就是其中之一。

当浏览Firefox DevTools控制台代码时，我注意到一种非常聪明的技术，可以将文本隐藏在屏幕上，但要确保它在复制+粘贴过程中出现。以下是技巧：

<p>Jenny don t change your number <span class="copy-only">8675309</span></p>

.copy-only {
  display: block;
  position: absolute;
  left: -9999999px;
  top: -9999999px;
}

使用上面的CSS，屏幕显示“Jenny don't change your number”，而复制该行将导致“Jenny don't change you number 8675309”。

当你通过CSS在屏幕外植入文本时，当用户进行复制操作时，它仍然会被复制到剪贴板。你本质上是在挑选被复制的内容，如果你希望用户复制你的内容，这可能非常有价值。