使用javascript处理内联块空间

Question

We all know the ages old problem with white spaces between inline-block elements. For example:

 .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> 

The best solution in my opinion is to remove any spaces between the elements:

 .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> 

Can we do this on a ready HTML with javascript/jQuery, like adding a script to the first snippet to behave like the second one? Some sort of a $('.wrapper').minify(); function.

EDIT

Someone suggested a possible duplicate with How to minify HTML with CSS and Javascript? . That question is about reducing page size by editing files on server side. Here I'm looking for a solution that minifies a specific element after the content is transferred, without editing the html files. The problem is not page size, but white spaces in an element.

Answer 1

Using jQuery you can remove all the textnodes which are children of the wrapper element like

 $('.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

The pure CSS way to do this is to set the font-size of the parent element to 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

If you're worried about the global font-size , then you can try using comments

 .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>