使用javascript处理内联块空间

Question

我们都知道内联块元素之间存在空白的古老问题。 例如：

 .wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;} 

 <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> 

我认为最好的解决方案是删除元素之间的任何空格：

 .wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;} 

 <div class="wrapper"> <div> </div><div> </div><div> </div><div> </div> </div> 

我们可以在具有javascript / jQuery的现成HTML上执行此操作吗，例如向第一个代码段添加脚本以使其表现得像第二个代码一样？ 某种$('.wrapper').minify(); 功能。

编辑

有人建议使用“ 如何使用CSS和Java脚本最小化HTML”进行重复？ 。 这个问题是关于通过在服务器端编辑文件来减小页面大小。 在这里，我正在寻找一种解决方案，该解决方案可以在内容传输后缩小特定元素，而无需编辑html文件。 问题不是页面大小，而是元素中的空格。

Answer 1

使用jQuery，您可以删除所有属于wrapper元素的子节点的textnode，例如

 $('.wrapper').contents().filter(function() { return this.nodeType == Node.TEXT_NODE; }).remove(); 

 .wrapper div { width: 100px; height: 30px; display: inline-block; border: 1px solid #333; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 2

纯CSS方法是将父元素的font-size设置为0

 .wrapper div { width:100px; height:30px; display:inline-block; border:1px solid #333; } .wrapper { font-size: 0; } 

 <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 3

如果您担心全局font-size ，则可以尝试使用注释

 .wrapper div { width:100px; height:30px; display:inline-block; border:1px solid #333; } 

 <div class="wrapper"> <div></div><!-- --><div></div><!-- --><div></div><!-- --><div></div> </div>