如何在粘貼HTML內容時刪除多餘的回車符

我正在嘗試爲我的網站用戶創建自定義電子郵件簽名。我有一個用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>

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; 
}

我有一個用的jsfiddle一個簡化版本我的簽名生成的複製問題here。

可能最簡單的方法來重現問題是打開我的小提琴，複製文本並將其粘貼到一個新的電子郵件，就像你會簽名。

多餘的一行將文本推到比它旁邊的圖像更高的位置，導致對齊問題。預先感謝任何幫助！

來源

2017-05-17 Andrew Merritt

我覺得這條線是從解釋HTML（後'' Logo ）。嗯，據我所知，這發生了 – Hydro

好的。出於某種原因，它在您使用不帶空格的代碼時起作用。有一點點的地方。

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: [email protected] | P: 000.000.0000</td></tr></tbody></table></div>

來源

2017-05-17 18:40:42 tech2017

這很有趣......它在該例子中的表格之後放置新的行。我目前的解決方案是有一個行和兩個單元格的表格，第一個是帶有vertical-align：top的圖片，第二個是文本簽名。通過這種方式，它可以將圖片和文字一起推出。 –

如何在粘貼HTML內容時刪除多餘的回車符

回答

相關問題