CODEWITHSUNDEEP
javascriptjqueryhtmlcssclipboard
rinogo
rinogo

Reputation: 9163

Providing alternative text for copy/paste

I'm fairly certain I've done this before, but I can't find any documentation about it. I'm finding this issue is oddly hard to research.

I'd like to display one version (A) of a bit of text on screen. However, when the text is copied, a different version of that text (B) is actually copied to the clipboard. In practice, A and B might be very similar, but the technique should allow for A and B to be completely different strings.

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

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

...and the user selects the div and issues a "copy" on it, I would like the text that is 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 app would separately take care of shortening the first instance of the string and adding the ellipses.)

I seem to recall this being possible with simple HTML/CSS, but the details are eluding me... Thoughts?

Upvotes: 1

Views: 1763

Answers (1)

TextDev
TextDev

Reputation: 23

I was able to solve this problem using just 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 class 'css' uses: -text-overflow, to place the ellipsis after the text, -overflow, to prevent the text from fully showing, -white-space, to prevent text from having multiple lines, -and the div has max-width, to define where to replace text with ellipsis.

This makes it so that all elements with class 'css' will have their text replaced with ellipsis once it exceeds the max-width limit.

Upvotes: 2

Related Questions