Скрыть текст, но показать его, если копировать и вставлять без JavaScript

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

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

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

 Jd Francis20 июн. 2016 г., 17:58
Без предоставленного кода я понятия не имею, что вы имеете в виду
 DBS20 июн. 2016 г., 18:01
В зависимости от того, что вы хотите, вы можете просто присвоить ему соответствующий цвет фона или цвет RGBA с полной непрозрачностью. Я считаю, что оба из них все еще должны позволять выбор.
 Katana31420 июн. 2016 г., 18:00
Похоже, вы предлагаете разрешить копирование / вставку в качестве решения головоломки? например, телефонная игра говорит: «Посмотрите на решение под новым углом», и решение состоит в том, чтобы повернуть телефон; затем аналогичным образом, попытка скопировать / вставить определенный текст на странице покажет больше, чем было изначально видно. Есть несколько способов сделать это, но вы можете начать с показа примера абзаца HTML с тегами, разделяющими части, которые вы хотели бы работать индивидуально.

Ответы на вопрос(2)

Решение Вопроса

Это возможное решение этой проблемы, однако оно может или не может быть уместным.

Появляется только после вставки

Потенциально, если вы хотите, чтобы он отображался только в вставленном тексте (а не когда он выделен цветом), вы можете сделать шрифт крошечным и прозрачным, чтобы его можно было скрыть между другим текстом, например

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>

 DBS20 июн. 2016 г., 18:23
@Trel Я немного волновалсяfont-size: 0 может вызвать проблемы с некоторыми браузерами, однако я думаю, что это, вероятно, безопасно. Изменить: Был быстрый Google вокруг, и, кажется, безопасно использовать.
 Trel20 июн. 2016 г., 18:22
Это сдвигает текст очень мало. Есть ли причина не использовать размер шрифта: 0? Это + цвет к rgba с 0 альфа, кажется, работает.
 Trel20 июн. 2016 г., 18:31
Если это безопасно для использования, тоfont-size: 0; color: rgba(255,255,255,0); это идеальный ответ.

Этот ответ является просто демонстрацией решения, обсуждаемого в комментариях к ответу DBS. Выбор текста не будет означать, что вы выбрали больше, чем «Это видно», но вставка его в Блокнот покажет все. Кажется, идеально подходит для небольших 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>

Ваш ответ на вопрос