javascript - 无法删除空格(在使用 lettering.js 拆分 div 之后)

Question

所以我得到了一些 div，我将它们与 lettering.js 分开了.这只是将一个元素拆分为 <span>。 s 包含单个字符。

当我得到一个包含多个单词的字符串，例如“Hello World!”时，lettering.js 将为单词之间的空格创建一个单独的跨度。该跨度没有宽度，因为它是“空的”→ 单词之间没有空格。

所以理论上我应该能够使用 span:blank 选择那些“空”跨度(并手动设置空格的宽度)因为 :blank 也会选择空格。但这没有用。

所以我尝试使用 JavaScript，但还是失败了。

我尝试了几种方法:

$("span[class^='char']").each(function(){
  // method 1:
  this.innerHTML.trim();

  // method 2:
  $(this).text().trim(); 

  // method 3:
  $(this).text().replace(/\s/g, '');

  // method 4:
  $(this).text().replace(' ', '');
});

但是所有这些方法都失败了。

选择器不是问题。它会选择我想要的每个跨度。

另一种方法就是设置一个 min-width对于每一个跨度，这都非常简陋，而且并不总是能很好地工作。

任何人都知道我如何获得那些“空”<span> s 显示为空格？

---

Here's a link如果您想检查问题，请提供问题的实例。

---

更新:删除 display:inline-block来自 span 元素使空间显示出来。我无法删除它，因为没有它变换动画将停止正常工作。

Answer 1

您可以使用 :empty 伪选择器并通过 CSS 中的内容添加空格；

span:empty{
   content:' ';
   display: inline-block;
  }

<span>A</span>
<span></span>
<span>B</span>