使用jQuery移除标签间的  并解决长文本换行异常问题

环境 #

jQuery: 1.11.3

问题概述 #

外层<span>包裹两个带.inline类的内部<span>，每个内部<span>后都跟着  ，长文本场景下这些空格会导致两行之间出现多余空行，需要移除空格并让两行文本紧密衔接，可通过JS或CSS实现。

错误效果 #

longer text1

longer text2

期望效果 #

longer text1
longer text2

解决方案 #

1. 用jQuery彻底移除   #

直接定位到每个.inline后面的空格文本节点并删除，从根源解决问题：

$('.inline').each(function() {
  const nextNode = this.nextSibling;
  // 匹配两个非换行空格的文本节点
  if (nextNode && nextNode.nodeType === 3 && nextNode.nodeValue === '\u00A0\u00A0') {
    nextNode.remove();
  }
});

2. 用CSS调整布局消除空行（无需修改DOM） #

因为.inline设置了inline-block，HTML中的空白（包括 ）会被解析为占位空格，结合行高问题导致空行，可通过以下样式修复：

方法一：父容器消除空白影响

给外层包裹的<span>加个类（比如inline-container），然后设置：

.inline-container {
  font-size: 0; /* 消除内部空白的占位宽度 */
}
.inline-container .inline {
  font-size: 14px; /* 恢复子元素字体大小，按需调整 */
  display: inline-block !important;
  line-height: 1.2; /* 缩小行高让两行紧密贴合 */
  vertical-align: top; /* 顶部对齐避免基线间隙 */
  margin: 0;
  padding: 0;
}

方法二：直接调整.inline元素样式

如果不能给父容器加类，直接修改.inline的样式：

.inline {
  display: inline-block !important;
  line-height: 1.2; /* 按需调整行高 */
  vertical-align: top;
  margin: 0;
  padding: 0;
  /* 可选：用负边距抵消空格影响，数值按需调整 */
  margin-right: -4px;
}

内容的提问来源于stack exchange，提问作者皮皮萌宝