Hide text, but have it show up if copied and pasted without javascript

Question

I\'m trying to do a design for a short story site.
One of the stories I\'ve been told would work better if someone copied and pasted text, extra lines would show up.

Answer 1

This answer is just a demonstration of the solution discussed in the comments of DBS' answer. Selecting the text will not indicate to you that you've selected any more than "This is visible", but pasting it into Notepad will show everything. Seems perfect for small ARGs or internet-based puzzles.

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>

Answer 2

This is a possible solution to this problem, however it may or may not be appropriate.

Only appears after pasting

Potentially if you want it to only appear in the pasted text (rather than when it's highlighted) you could make the font both tiny and transparent so it can be hidden between the other text e.g.

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>

Visible while selected

If you would prefer the text to be visible simply by selecting it, you can either match the background colour set it to a transparent colour.

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>