Javascript 无法删除空白（使用letting.js拆分div后）_Javascript_Jquery_Html_Css

Javascript 无法删除空白（使用letting.js拆分div后）

javascript jquery html css

Javascript 无法删除空白（使用letting.js拆分div后）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我得到了一些div，我和他们分手了。这只是将元素拆分为包含单个字符的s 当我得到一个包含多个单词的字符串时，比如Hello World！，lettering.js将为单词之间的空格创建一个单独的跨度。这个跨度没有宽度，因为它是空的→ 字里行间没有空格所以理论上我应该能够选择那些带有span:blank的空白跨距，并手动设置空格的宽度，因为：blank也会选择空白。那没用所以我尝试使用JavaScript，但即使这样也失败了我尝试了几种方法： $("span[class^='char'

所以我得到了一些div，我和他们分手了。这只是将元素拆分为包含单个字符的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(' ', '');
});

但所有这些方法都失败了

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

另一种方法是为每个跨度设置一个最小宽度，这是非常破旧的，并不总是很好地工作

有人知道我如何把那些空的s显示为空格吗

如果您想查看问题，请使用问题的实例

更新：从跨度元素中删除“显示：内联”块将显示空间。我无法删除它，因为没有它，变换动画将无法正常工作。

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

跨度：空{ 内容：''；显示：内联块； } A.

BI无法使用：empty，因为跨度包含空格且不为空：empty只是检查真正的空元素。抱歉-我以为你在用trim清除那些元素-如果跨度中有空格-为什么你不能将显示设置为inline block？是的，这就是我尝试的，但是我提到的所有上述方法都失败了：/span元素已经得到display:inline块，但空间仍然没有显示。感谢display:inline块注释。我试图删除该属性，但现在空间出现了。这有什么意义吗我仍然不能不使用display:inline块，因为转换动画在那时停止工作。我想现在它只是将跨度显示为普通DOM流的一部分-很高兴在一些小的方面提供了帮助：

  You can use letter-spacing to remove white space between the text.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    div.a {
      width: auto;
      border: 1px solid black;
      letter-spacing:0px
    }

    div.b {
      width: 150px;
      border: 1px solid black;  
    }

    div.c {
      width: 50%;
      border: 1px solid black;  
    }
    </style>
    </head>
    <body>
    <h1>The width Property</h1>

    <h2>width: auto (default)</h2>
    <div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>



    </body>
    </html>