外文论文

The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases.

HTML和CSS之间的关系很特殊：通过HTML将内容与CSS的演示文稿混合在一起，可以做出很棒的演示文稿。 但是，有时您仅需要使用CSS技巧来增强功能。 这可能是其中一种情况。

When browsing through the Firefox DevTools console code, I noticed a really clever technique for hiding text on screen but making sure it's present during a copy + paste. Here's the technique:

浏览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;
}

With the CSS above, the screen displays "Jenny don't change your number" while copying that line would result in "Jenny don't change your number 8675309".

使用上面CSS，屏幕显示“ Jenny不要更改您的号码”，而复制该行将导致“ Jenny不要更改您的号码8675309”。

When you plant the text offscreen via CSS, it's still copied to the clipboard when the user does a copy operation. You're essentially picking and choosing what gets copied, which can be very valuable if you expect users to copy your content.

当您通过CSS在屏幕外放置文本时，当用户执行复制操作时，文本仍会复制到剪贴板。 本质上，您是在选择要复制的内容，如果您希望用户复制您的内容，这将非常有价值。

翻译自: https://davidwalsh.name/offscreen-text

外文论文