Question

我正在尝试为我的网站用户创建自定义的电子邮件签名。我有一个用HTML编写的签名，可以通过按钮选择。该按钮运行JS和Jquery函数以选择签名包装器。复制和粘贴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: 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;
}

我有一个JSFiddle，我的签名生成器的简化版本可以复制问题here。

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

额外的行将文本推到高于其旁边的图像并导致对齐问题。在此先感谢您的帮助！

Answer 1

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

https://jsfiddle.net/728udebg/1/

flatten

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

1 个答案: