Conceal the text, yet make it appear when copied and pasted without the use of javascript

Designing a short story site has its challenges.
One story may require hidden text to show up when copied and pasted.

Is there a way to achieve this effect using only HTML and CSS without relying on Javascript?

Here is an example of the HTML code:

<div>Lorem ipsum <span class="inv"> ---- Cleverly hidden text here ---- </span>dolor sit amet</div>

I have tried different styles, such as setting display: none;, but that does not copy the hidden text as intended.

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

Changing the width to 0; prevents the text from being copied. The current style still shows a slight artifact when highlighted.

(On a side note: It seems like the goal is for the story to subtly hint at revealing hidden information when copied, leading users to discover another unlisted story on the site)

htmlcss

Answer №1

This solution offers a potential approach to the issue at hand, although its suitability may vary.

Only reveals itself upon pasting

To ensure that certain text only becomes visible when pasted (rather than highlighted), one could manipulate the font size to take up no space, effectively hiding it within the surrounding text like so:

div {
  color: #000;
  background-color: #FFF;
}

.hidden{
  font-size: 0;
}
<div>
  This is visible. 
  <span class="hidden">This is not.</span>
  (Paste this to reveal the hidden line)
</div>

Visible when selected

If a preference exists for making text visible upon selection, one can achieve this by matching the background color or setting it to a transparent shade regardless of the existing background color:

div {
  color: #000;
  background-color: #FFF;
}

.hidden1{
  /* Match the background color */
  color: #FFF;
}

.hidden2{
  /* Transparent text, suitable for any background color */
  color: rgba(0,0,0,0); 
}
<div>
  This is visible. 
  <span class="hidden1">This is not.</span>
  <span class="hidden2">Neither is this.</span>
</div>

Answer №2

This example serves as a showcase of the solution elaborated in the feedback on DBS' response. When you highlight the text, it may seem like only "This is visible" is selected, but if you paste it into Notepad, you'll see the full content. This technique could be ideal for minor ARGs or online puzzles.

div {
  color: #000;
  background-color: #FFF;
}

.hidden1{
  /* Blends with the background color */
  color: #FFF;
  font-size: 0;
}

.hidden2{
  /* Completely transparent text, suitable for any background */
  color: rgba(0,0,0,0); 
  font-size: 0;
}
<div>
  This part is visible. 
  <span class="hidden1">This section is hidden.</span>
  <span class="hidden2">Neither is this one.</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing a Dom element using stage.removeChild( )

When the number 6 is typed and entered into the game, the function correct() in the code snippet below determines what action to take. I would like to remove the DOM element gg (the equation 3+3=input) from the stage after typing 6 and pressing enter. How ...

javascripthtmldomcanvasjsfiddle

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

Creating content inside a list

When aiming for semantic code, I am currently debating the best way to write text within a list item. Should it be done as follows: <li> <p>This is my text</p> <p>This is another bit of text</p> </li> or <l ...

htmlhtml-lists

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

javascripthtmlcssreactjsnext.js

Incorporating a Dropdown Feature into the Side Navigation Panel

Help needed with activating dropdown menu on hover. body { font-family: 'Alegreya Sans', sans-serif; overflow-x: hidden; background: gray; color: white; } #content { padding: 15px; transition: margin-left 0 ...

htmlcss

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

cssxhtml

Removing a outside div element based on a dropdown change in ASP.NET jQuery

this is the structure of my unique div <div class="row-fluid"> <div class="span12"> <div style="overflow: auto; width: 90%;" class="goleft"> <div style="display: inline-block; width: 200px;"> ...

jqueryhtmlasp.netcanvas

Design a modern slider with a button that triggers a pop-up modal window

Recently Updated I am working on a testimonial slider using slick slider, and I want to incorporate a modal within each slide. In my custom post type 'Testimonials' (also known as 'getuigenissen' in English), I have various Advanced C ...

phpjquerycsswordpressslick.js

When using CSS3 flex, the input box has a specified width but is still overflowing

Can anyone provide some insight into the behavior of this particular jsFiddle? http://jsfiddle.net/zZgmn/1/ I am attempting to set a specific width for an input[type=text] box. However, when the flex-direction is set to row, the input box refuses to adjus ...

cssgoogle-chromeflexbox

Effortlessly adjust item width in CSS Grid

I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation ...

cssreactjscss-grid

The body's width is more compact compared to one of my containers in HTML/CSS

After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...

htmlcss

Reposition and resize an image. Creating a grid layout

I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section): The entire project is based on a grid layout. I need a circular image that is larger than the container, positioned to the ...

htmlcssimagegridcss-position

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

csscss-selectors

``There seems to be an issue with the alignment and vertical placement in both Firefox and IE

I'm currently working on a responsive landing page for a company and running into an issue with the CTA button's position outside of Chrome. It's functioning perfectly in Chrome, resizing as intended: Here is the CSS responsible for this: ...

htmlcssresponsive-design

CSS - Separate grid items and expand to the maximum width within the column

Is it possible to have two buttons in one row, where one is wider than the other? If the viewport size becomes too small, can the buttons automatically switch to sit in a single column with the smaller button stretching its width to match the wider one? I ...

htmlcsssass

I'm struggling to convert this vertical navigation bar into a horizontal layout using CSS

<nav class="navbar navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="#">I/H</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> ...

htmlcsstwitter-bootstrapbootstrap-4

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

htmlcss

Accessing a text document from a specific folder

As a novice in the world of HTML and PHP, I am attempting to develop a script that can access a directory, display all text files within it, allow for editing each file, and save any changes made (all operations will be managed through an HTML form). Howev ...

phphtml