我正在运行一个简单的脚本，它将单词（并忽略现有的HTML标记） Package 在span标记中具有特定类的元素中。
这是剧本

$('.has-transition_text-reveal').each(function() {
    $(this).contents().filter(function() {
        return this.nodeType === 3;
    }).replaceWith(function() {
        return this.nodeValue.split(/(?=\b\s)/).map(str => `<span class="text-reveal_wrapper"><span class="text-reveal">${str}</span></span>`)
    });
});

下面是一些示例标记;

<h1><small class="has-transition_text-reveal">Test <span class="text-reveal_wrapper"><span class="text-reveal"><span> test-test<sup><ion-icon name="cloudy-outline"></ion-icon></sup></span></span></span> test test & test test — test test test, <span class="text-reveal_wrapper"><span class="text-reveal"><span>test test<sup><ion-icon name="chatbubbles-outline"></ion-icon></sup></span></span></span>.</small></h1>

这是导致空白被删除的CSS;

.text-reveal_wrapper {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.text-reveal {
  // transform: translateY(100%);
  position: relative;
  display: block;
}

有谁知道解决这个难题的方法吗？
P.S.添加空格，前或前 Package 并不能完全解决这个问题，因为在某些情况下，它会在新行的开头留下空格。

$('.has-transition_text-reveal').each(function() {
  $(this).contents().filter(function() {
    return this.nodeType === 3;
  }).replaceWith(function() {
    return this.nodeValue.split(/(?=\b\s)/).map(str => `<span class="text-reveal_wrapper"><span class="text-reveal">${str}</span></span>`)
  });
});

.text-reveal_wrapper {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}

.text-reveal {
  // transform: translateY(100%);
  position: relative;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1><small class="has-transition_text-reveal">Test <span class="text-reveal_wrapper"><span class="text-reveal"><span> test-test<sup><ion-icon name="cloudy-outline"></ion-icon></sup></span></span></span> test test & test test — test test test, <span class="text-reveal_wrapper"><span class="text-reveal"><span>test test<sup><ion-icon name="chatbubbles-outline"></ion-icon></sup></span></span></span>.</small></h1>