Estoy tratando de hacer un diseño para un sitio de cuentos cortos.
Una de las historias que me han contado funcionaría mejor si alguien copiara y pegara texto, aparecerían líneas adicionales.

¿Hay alguna forma de lograr esto con solo HTML y CSS? He intentado usardisplay: none; pero eso no parece copiar el texto oculto. No quiero usar Javascript para esto

HTML de ejemplo

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

Lo más cerca que he venido es

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

Si lo hagowidth: 0; No copia. El camino anterior todavía desplaza el texto una pequeña cantidad, y cuando se resalta, muestra un poco de artefacto.

(Sin relación con la pregunta en sí: pero por lo que entiendo, la intención es que la historia sugiera fuertemente que cuando se copia, aparece información oculta, lo que conduciría a otra historia no listada en el sitio para las personas que entienden lo que está insinuando)