Question

我正在尝试为一个短篇故事网站做设计我被告知的其中一个故事如果有人复制并粘贴文字会有更好的效果，额外的线条会出现。

无论如何只用HTML和CSS来实现这个目标吗？我尝试过使用display: none;，但似乎并没有复制隐藏文字。我不想在这个

中使用Javascript

示例HTML

<div>Lorem ipsum <span class="inv"> ---- This is the cleverly hidden text ---- </span>dolor sit amet</div>

我最接近的是

width: 1px;
overflow: hidden;
display: inline-block;
height: 1em;
color: rgba(255,255,255,0);

如果我width: 0;，则不会复制。上面的方法仍然会将文本移动一小部分，并且在突出显示时，会显示一些神器。

（与问题本身无关：但根据我的理解，故事的目的是强烈暗示，在复制时，隐藏的信息会显示出来，这将导致网站上另一个未列出的故事，让人们明白它的暗示在）

Answer 1

这是此问题的可能解决方案，但它可能适合也可能不适用。

仅在粘贴后显示

如果您希望它只出现在粘贴的文本中（而不是突出显示），则可能会使字体既小又透明，因此可以隐藏在其他文本之间，例如。

div {
  color: #000;
  background-color: #FFF;
}

.hidden{
  /* Transparent text, should work on any background colour */
  color: rgba(0,0,0,0); 
  font-size: 0;
}

<div>
  This is visible. 
  <span class="hidden">This is not.</span>
  (Copy and paste this to see the hidden line)
</div>

选中时可见

如果您希望仅通过选择文本就可以看到该文本，您可以将背景颜色与其设置为透明颜色。

div {
  color: #000;
  background-color: #FFF;
}

.hidden1{
  /* Match the background colour */
  color: #FFF;
}

.hidden2{
  /* Transparent text, should work on any background colour */
  color: rgba(0,0,0,0); 
}

<div>
  This is visible. 
  <span class="hidden1">This is not.</span>
  <span class="hidden2">Nor is this.</span>
</div>

Answer 2

这个答案只是对星展集团答复评论中讨论的解决方案的一个证明。选择文本不会向您表明您选择了“这是可见的”，但将其粘贴到记事本中将显示所有内容。似乎非常适合小型ARG或基于互联网的谜题。

div {
  color: #000;
  background-color: #FFF;
}

.hidden1{
  /* Match the background colour */
  color: #FFF;
  font-size: 0;
}

.hidden2{
  /* Transparent text, should work on any background colour */
  color: rgba(0,0,0,0); 
  font-size: 0;
}

<div>
  This is visible. 
  <span class="hidden1">This is not.</span>
  <span class="hidden2">Nor is this.</span>
</div>

隐藏文字，但如果没有javascript复制和粘贴，则会显示

2 个答案: