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

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>