Offering substitute text for directly copying and pasting

I remember doing something similar in the past, but I can't seem to find any information about it now. It's proving to be quite difficult to research this particular issue.

What I want to achieve is showing one version (A) of text on the screen, but when that text is copied, a different version (B) is actually copied to the clipboard. A and B could be similar or entirely different strings.

For instance, if I use a <div> element to display the following to the user:

<div>This is a really long...</div>

...and the user selects the div and copies it, I would like the text placed on the clipboard to be:

This is a really long bit of text that is too large to display on-screen, but should be fully intact when copy/pasted.

(Of course, my application would take care of shortening the displayed string and adding ellipses.)

I have a feeling this can be achieved with simple HTML/CSS, but the specifics are escaping me at the moment. Any thoughts?

javascriptjqueryhtmlcssclipboard

Answer №1

I successfully tackled this issue purely with CSS.

.css{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
<html>
  <body>
    <div class="css" style="max-width: 17.5ch;">This is a really long bit of text that is too large to display on-screen, but should be fully intact when copy/pasted.</div>
  </body>
</html>

The 'css' class utilizes: -text-overflow for adding ellipses after the text, -overflow to prevent complete visibility of text, -white-space to keep text in single line, -and setting max-width in div to determine where to apply ellipsis.

This ensures that any element with class 'css' will truncate its text with ellipses upon surpassing the specified max-width.

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

Tips for initiating a PHP class method through AJAX

As someone who is just starting to learn about ajax, I'm currently facing a challenge with calling the get_mother method through ajax in my form's textbox change event. My goal is to display the results in a datalist by using the following code. ...

javascriptphpjqueryajax

NextJS function utilizes its own references within React and automatically fetches data without the need for an import

I recently purchased this template and I'm trying to figure out which page the code snippet "{getLayout(<Component {...pageProps} />)}" is directed to during the initial load. It seems like it might be a global variable hidden somewher ...

javascriptreactjstypescriptnext.js

Using React.js to dynamically change a CSS class depending on a certain condition

I am trying to assign a CSS class to a div based on a specific condition. The issue I am facing is that it always takes the last condition. Below is the code snippet: When I run the code, I receive logos.length as 3 <div className= "${ (this.state. ...

javascripthtmlreactjs

Upgrading to Bootstrap 5 and customizing the collapse button text upon click

I've spent a lot of time searching for a solution to my problem, but all the advice I found is for bootstrap 3 and 4, not version 5. Below is the code I am currently using: <div class="p-3">9 Members Online <a class="p-1 btn ...

javascripttwitter-bootstrapbootstrap-5

Receiving HTML from NodeJs instead of JSON

I am currently working on a project that involves developing an app and landing pages. While we are using NodeJs with Axios and VueJs for the app part, the landing pages are built using simple jQuery. I need to make API calls for the landing pages, but I a ...

javascriptnode.jsjsonapiaxios

The accuracy of Google Maps is compromised when the width is expanded

Here's a piece of code I use to adjust the size of the Google Map container: var myMap = document.getElementById('googleMap'); myMap.classList.toggle('fullscreen'); And here is the corresponding CSS: .fullscreen { width: 100% !i ...

javascripthtmlcssgoogle-maps

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

cssreactjsmaterial-ui

Modifying the CSS based on the SQL data retrieved

I'm currently diving into the world of php and jquery, attempting to build a webpage that displays player information and their status fetched from my Mysql server. Although the core code is functional, it's a mashup of snippets gathered from va ...

javascriptphpjqueryhtmlmysql

How can I update the column values to NULL using the $_POST values for both columns?

Having some trouble updating a column ($_POST['dtf']) to a null value based on another column's value ($_POST['pid']). I've attempted various versions of the MySQL statement but haven't had any success. Trying to use AJAX ...

phpjquerymysqlajax

Issue with Click Event in jQuery Image Gallery

I am trying to implement an image loading functionality where #photo_1 will slide down once the image in its corresponding div is loaded. Subsequently, when #thumb_2 (and others) are clicked on, their respective images like #photo_2 should appear. Current ...

jqueryonclickslidedown

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Attempting to update a Task using the Graph API from an angular2 typescript app. Here is an example of my request - Request URL:https://graph.microsoft.com/beta/tasks/_1EKXXuN1UGInJ9yVHAjIpYAKuC2 Request Method:PATCH Request Body: { "createdBy":"f16 ...

javascriptasp.net.netajaxmicrosoft-graph-api

Having trouble retrieving submitted data in Django after making an Ajax post

This is a sample HTML page: <div> <form id="assignment_form" action="/submit-assignments/" method="post" accept-charset="utf-8"> {% csrf_token %} <!-- Fields here --> <select id="user_list" multiple='multiple' si ...

jqueryhtmlajaxdjango

The AngularJS error message: TypeError: Unable to access the 'images' property because it is undefined

Currently using AngularJS version 1.5.11 I am attempting to present images sourced from a JSON array. Is my method correct: $scope.mainImage = $scope.template.images[0].name;. The issue arises at the line where it says it cannot read property of images. ...

javascriptangularjs

Automatically toggle Bootstrap checkbox switch to OFF upon successful completion of AJAX script

On my Employee screen, I have an HTML Form with a Bootstrap Checkbox Switch that toggles the visibility of password change fields. Clicking it reveals or hides the fields accordingly. I'd like to set this switch to "off" when the AJAX script updates ...

javascriptjqueryasp.net-ajaxbootstrap-5

Javascript encountered an error upon attempting to return from the main function

I have a function that calls the database to perform an action: function callQuery(query) { db.query(query, (err, res) => { if (err) { // Error connecting to DB console.log(err.stack) } else { // Return the results ret ...

javascriptnode.jsexpress

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

Instructions for deselecting the active class from a previously selected list item when a new one is selected in Angular

How can I remove the intentionally set active class from a list item when other items are clicked, while still keeping it active on page load using routerLinkActive="active" in Angular? I attempted to use ngClass but it did not work as expected. Is there ...

cssangular

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss

Is there a way to determine the remaining time or percentage until document.ready is reached?

My usual approach is to display a loading animation like this: $('#load').show(); $(document).ready(function(){ $('#load').hide(); }); where the <div id="load"> contains just an animated gif. However, I've been conside ...

javascriptjquerypageload

The process of incorporating content from a different page into a Bootstrap 5 Modal can be achieved by using Laravel 10

Here is a snippet of my code from index.blade.php: <a data-bs-toggle="modal" data-bs-target="#modal_frame" href="{{route('caborCreate')}}">link</a> This is how the modal is coded in the create page - cre ...

javascriptlaravelbootstrap-5laravel-10