What is the best way to indicate line breaks in HTML text while still allowing for easy copy and paste?

I have a form that shows a table filled with email addresses, and I want to indicate to the browser that the email address can wrap before the @; for example, 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3824262e2724252c2e262a22272b23260b3824262e272a392c2e2f24262a225765282426">[email protected]</a>
should wrap as 
somelongemail<break>@somelargedomain.com
.

The typical solution is to use a zero-width space, but this may cause issues when someone tries to copy and paste the email address (they might end up pasting the email 

example<zero-width-space>@example.com
, which is not a valid email).

Is there a way to create word-wrap hints without interfering with copy and paste functionality?

For instance:

table {
  border: 1px solid grey;
  width: 50px;
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}
<table>
  <tr><td>without any break hints</td><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e794888a828b888980828a868e8ba783888a868e89c984888a">[email protected]</a></td></tr>
</table>

<table>
  <tr><td>with a zero-width space</td><td>somelongemail&#8203;@domain.com</td></tr>
</table>

htmlcss

Answer №1

If you're looking for a solution to avoid long strings breaking inappropriately, consider using the <wbr> tag. This tag has decent support, although it may not work on Internet Explorer.

Edit: I have included a potential fix for IE related issues that has been effective for me on IE9 and above.

table {
  border: 1px solid grey;
  width: 50px;
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

table:last-of-type {background-color: green; color: #FFF;}

/* possible IE fix? */
wbr:after {
    content:"";
    display: block;
}
<table>
  <tr><td>without any break hints</td><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ae9f5f7fff6f5f4fdfff7fbf3f6dafef5f7fbf3f4b4f9f5f7">[email protected]</a></td></tr>
</table>

<table>
  <tr><td>with a zero-width space</td><td>somelongemail&#8203;@domain.com</td></tr>
</table>

<table>
  <tr><td>using the &lt;wbr&gt; tag</td><td>somelongemail<wbr>@domain.com</td></tr>
</table>

Answer №2

How to insert new line in JavaScript?

One way to achieve this is by using a regular expression to add the desired character at the specified location.

Additionally, you can utilize JavaScript to break lines by inserting a %0A before the designated point and implementing a listener for the copy event to manage the clipboard content and eradicate the inserted character.

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

Want to learn the process of closing a modal using Javascript?

I am working on implementing 6 different modals, each featuring an exit button named 'modal-box__exit-button'. I have attempted to use JavaScript to close the modals when the exit button is clicked, but it seems like my code may have some errors. ...

javascripthtmlcssshopify

Clickable link for target display

When attempting to create a target, I encountered an issue where the target linked to by the "id" displays the text as if it were a clickable link, even though it is not actually a hyperlink. How can I prevent this from happening? (Page: ) Thank you in ad ...

htmlanchortarget

Jquery slide animation not functioning properly

Hello, I am attempting to create a sliding effect for specific text where the slide effect adds something similar to extra spacing. The desired effect can be seen here: like margin or something, the framework being used is . My question is: Is there a wa ...

javascriptjqueryhtmlcssslide

Card image floating to the right using Bootstrap

I have a set of three horizontal cards, not in a card deck as it's not responsive, and I want to align images in the bottom right corner of each. Bootstrap 4 comes with a class for card-img-left which works perfectly. I've attempted using float-r ...

csstwitter-bootstrapbootstrap-4

Clicking on the div will redirect the page to one destination, while clicking on the anchor tag will redirect the page to a different destination

I have a div containing an anchor tag, like so: <div onclick="redirect to one location" style="height:200px;width:200px"><a href="http://www.google.com" >text</a></div> The div has dimensions of 200px by 200px and on click, it sho ...

javascriptjqueryhtml

Showing a tooltip in Angular when a button is disabled

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" ...

javascripthtmlcssbootstrap-4angular-material

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

I have implemented the collapsible sections code from W3 School successfully on my website. Now, I am trying to achieve a specific functionality where the "Open Section 1 Button" should slide down with a margin-top of 10px only if the first section "Open S ...

javascriptjquerycss

Learn how to implement a rotation effect on a pseudo-element in ReactJS with clickable functionality, specifically designed for SVG

[images for my project] [1]: https://i.sstatic.net/a6EFH.png [2]: https://i.sstatic.net/lMhNu.png Clicking on the orange arrow should trigger a 180-degree rotation. Can this be achieved using CSS or do I need to utilize JavaScript? Also, how can I dec ...

javascriptcssreactjscss-selectorspseudo-element

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Jquery form extension

I've implemented the Jquery form plugin for submitting login form data and it's working well. However, I am facing an issue with redirecting a successfully logged-in user to the client panel from the login page in my PHP script. Whenever a user s ...

phpjqueryhtmlajax

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

javascriptphphtmlajax

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

javascriptjqueryhtmlcss

Query MySQL with PHP using a variable found in HTML

I need help with creating a PHP script that can search my database for parts using a generated part number from an HTML page and display the price in a table cell. Below is the Ajax script and variable I am using: var Row = document.getElementById("test ...

phpjqueryhtmlmysqlajax

The pre-loader is hidden behind the block content and navigation bar

I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...

javascriptjqueryhtmlcssdjango

Ways to create a flexbox that can scroll and includes two divs that fill the entire screen

I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...

htmlcssresponsive-designflexbox

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

javascripthtmlreactjs

What is the best way to ensure the width of a DIV adjusts to its content before centering it?

I'm trying to make the width of the parent div adjust based on how many inline-block displayed boxes can fit in one row. When the parent div reaches 100% width and a box is too wide for the first row, it should drop down to the next line. That's ...

htmlcssflexbox

Is it possible to reference two separate function-based views in views.py with just one URL in Django, or perhaps utilizing a Class-based view?

In my development process, I have experimented with two different approaches to views: Function-based and class-based. Currently, I am faced with the challenge of calling two separate functions within the same URL structure. Although some have suggested co ...

pythonhtmldjangohighcharts

What is preventing Google Chrome from automatically breaking?

I seem to have made a mistake in this document, but I can't quite pinpoint what it is. There isn't much content in here yet as I am still in the process of building it for a WB. Interestingly, it works in Internet Explorer but not in Google Chrom ...

cssgoogle-chromehtmlpre

Restrict the HTML date input to only allow selection of the current date

In my form, I have set an input type date that is restricted to today's date by using the min and max attributes with JavaScript. The issue is that users are still able to manually input a different date instead of selecting it from the calendar popup ...

javascripthtml