Text ausblenden, aber es wird angezeigt, wenn er ohne Javascript kopiert und eingefügt wird

Ich versuche, ein Design für eine Kurzgeschichten-Site zu erstellen.
Eine der Geschichten, die mir erzählt wurden, würde besser funktionieren, wenn jemand Text kopierte und einfügte. Zusätzliche Zeilen würden auftauchen.

Ist es überhaupt möglich, dies nur mit HTML und CSS zu erreichen? Ich habe versucht mitdisplay: none; aber das scheint den versteckten Text nicht zu kopieren. Ich möchte kein Javascript für dieses @ verwend

Beispiel HTML

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

Das nächste, das ich gekommen bin, ist

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

Wenn ich machewidth: 0; es kopiert nicht. Der obige Weg verschiebt den Text noch ein wenig und zeigt, wenn er markiert ist, ein kleines Artefakt.

(Nicht in Zusammenhang mit der Frage selbst: Nach meinem Verständnis deutet die Geschichte darauf hin, dass beim Kopieren verborgene Informationen auftauchen, die zu einer weiteren nicht aufgeführten Geschichte auf der Website für Leute führen, die verstehen, worauf es anspielt.)

Antworten auf die Frage(4)

Ihre Antwort auf die Frage