3
私のウェブサイトのユーザー用にカスタマイズされた電子メール署名を作成しようとしています。私はボタンで選択されたHTMLで書かれた署名を持っています。このボタンは、JSおよびJquery関数を実行してシグニチャーラッパーを選択します。 htmlをコピーして貼り付けると、最後に不必要な余分な行が追加されます。HTMLコンテンツを貼り付けるときに余分な改行を削除するには
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: [email protected] | 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;
}
私は問題hereを再現するために私の署名生成の簡易版でJSFiddleを持っています。
問題を再現する最も簡単な方法は、私のフィドルを開いてテキストをコピーして、署名のように新しいメールに貼り付けることです。
余分な行が、テキストを隣のイメージよりも高く押し上げて配置問題を引き起こしています。助けをあらかじめありがとう！
私は、この行が（ ''
後の）解釈HTMLからだと思います。ハム、私の知る限りこれが起こる –
Hydro