How to remove extra carriage return when pasting HTML content
I am trying to create a custom email signature for my website users. I have a signature written in HTML that is selectable using a button. The button triggers a JS and JQuery function to select the signature wrapper. When the html is copied and pasted, an extra line is added at the end.
Html
<body>
<div class="signature-wrapper" id="signature">
<img id="image" src="https://s-media-cache-ak0.pinimg.com/originals/8b/f5/00/8bf500fb1a32d726c98e23b8c3e3ecf9.jpg" alt="Logo">
<table id="signature-table">
<tbody>
<tr id="signature-line-1">
<td>Name | Position</td>
</tr>
<tr id="signature-line-2">
<td>E: example@example.com | P: 000.000.0000</td>
</tr>
<tr id="blank">
</tr>
<tr id="signature-line-3">
<td>Facebook | Twitter | Indeed</td>
</tr>
</tbody>
</table>
</div>
<button id="select-button" onclick="selectSignature('#signature')">Select Signature</button>
</body>
Js
selectSignature = function(elementId) {
$(elementId).selectText();
};
jQuery.fn.selectText = function() {
var range, selection;
if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(this[0]);
selection.removeAllRanges();
selection.addRange(range);
}
};
CSS
.signature-wrapper {
height: 80px;
padding: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#signature-table {
padding-top: 3px;
font-family: Arial, Helvetica, sans-serif;
}
#signature-line-1 {
font-weight: bolder;
font-size: 14px;
line-height: 10px;
}
#image {
width: 80px;
height: 80px;
margin-right: 10px;
}
#signature-line-2, #signature-line-3 {
font-weight: normal;
font-size: 12px !important;
line-height: 20px;
}
#blank {
height: 10px;
}
I have a JSFiddle with a simplified version of the signature generator to duplicate the problem here .
Probably the easiest way to duplicate the problem is to open the fiddle, copy the text, and paste it into a new email as if you had signed up.
The extra line pushes the text higher than the image next to it and causes alignment issues. Thanks in advance for your help!
source to share
OK. for some reason it works when you use code without spaces. There is something small in there.
https://jsfiddle.net/728udebg/1/
<div class="signature-wrapper" id="signature"><table id="signature-table"><tbody><tr id="signature-line-1"><td rowspan="2"><img id="image" src="https://s-media-cache-ak0.pinimg.com/originals/8b/f5/00/8bf500fb1a32d726c98e23b8c3e3ecf9.jpg" alt="Logo"></td><td>Name | Position</td></tr><tr id="signature-line-2"><td>E: example@example.com | P: 000.000.0000</td></tr></tbody></table></div>
source to share