Javascript 粘贴HTML内容时如何删除额外的回车符_Javascript_Jquery_Html_Css

Javascript 粘贴HTML内容时如何删除额外的回车符

javascript jquery html css

Javascript 粘贴HTML内容时如何删除额外的回车符,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试为我网站的用户创建一个定制的电子邮件签名。我有一个用HTML编写的签名，它通过一个按钮被选中。该按钮运行JS和Jquery函数来选择签名包装器。当html被复制和粘贴时，它会在末尾添加一个不需要的额外行 HTML CSS 我有一个JSFIDLE和签名生成器的简化版本来复制这个问题复制问题的最简单方法可能是打开我的小提琴，复制文本并将其粘贴到新的电子邮件中，就像你需要签名一样额外的一行将文本推到高于其旁边图像的位置，并导致对齐问题。提前感谢您的帮助好的。出于某种原因，当您使用不带空

我正在尝试为我网站的用户创建一个定制的电子邮件签名。我有一个用HTML编写的签名，它通过一个按钮被选中。该按钮运行JS和Jquery函数来选择签名包装器。当html被复制和粘贴时，它会在末尾添加一个不需要的额外行

HTML

CSS

我有一个JSFIDLE和签名生成器的简化版本来复制这个问题

复制问题的最简单方法可能是打开我的小提琴，复制文本并将其粘贴到新的电子邮件中，就像你需要签名一样

额外的一行将文本推到高于其旁边图像的位置，并导致对齐问题。提前感谢您的帮助

好的。出于某种原因，当您使用不带空格的代码时，它会起作用。在某处有一件小事

Name |位置：example@example.com| P:000.000.0000

我认为这一行来自解释的HTML（在

之后）。嗯，据我所知，这件事很有趣。。。在该示例中，它将新行放在表格后面。我目前的解决方案是使用一行两个单元格的表格，第一个是带有垂直对齐的图片：top，第二个是文本签名。这样，它会将图片和文本一起向上推。

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

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

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

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