Trel Trel - 5 months ago 12
HTML Question

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

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.

Is there anyway to achieve this with just HTML and CSS? I've tried using

display: none;
but that doesn't seem to copy the hidden text. I do not want to use Javascript for this

Example HTML

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


The closest I've come is

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


If I do
width: 0;
it doesn't copy. The way above still shifts the text a small amount, and when highlighted, does show a bit of an artifact.


(Unrelated to the question itself: But from what I understand, the intent is the story will strongly hint that when copied, hidden information shows up, which would lead to another unlisted story on the site for people who understand what its hinting at)

DBS DBS
Answer

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>

Comments