Я пытаюсь сделать дизайн для сайта рассказа.
Одна из историй, которые мне рассказали, будет работать лучше, если кто-то скопирует и вставит текст, появятся дополнительные строки.

Есть ли способ достичь этого только с помощью 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; это не копирует. Приведенный выше способ все еще сдвигает текст на небольшое количество, и, когда он выделен, он показывает что-то вроде артефакта.

(Не имеет отношения к самому вопросу: но из того, что я понимаю, намерение заключается в том, что история сильно намекает на то, что при копировании появляется скрытая информация, что приведет к появлению на сайте еще одной незарегистрированной истории для людей, которые понимают, на что она намекает)