Zeilenumbrüche automatisch aus der HTML-Datei entfernen

Question

Ich arbeite gerade an meinem eigenen Grid-großen Framework. Es funktioniert so, wie ich es bisher wollte. Es gibt jedoch diesen Abstand zwischen den Spalten. (Bitte sehen Sie diese JSFiddle)

Ich habe bereits festgestellt, dass der Grund, dass dieser Raum da ist, wegen der Zeilenumbrüche in HTML ist.

<div class="UIcolumn"> 
    1 
</div> 
<div class="UIcolumn"> 
    2 
</div> 

Sie diesen Raum in der zweiten Reihe nicht sehen, wo ich den Zeilenumbruch zwischen den beiden Säulen entfernt, und es gibt keinen Raum dazwischen.

<div class="UIcolumn"> 
    6 
</div><div class="UIcolumn"> 
    7 
</div> 

Ich bin auf der Suche nach einer Möglichkeit, alle diese Zeilenumbrüche automatisch zu entfernen. Es ist keine Option, dies manuell zu tun, da die Seiten immer größer werden.

Ich habe versucht, Zeilenumbrüche mit $('body').html($('body').html().replace('\n','')) zu entfernen, was definitiv nicht funktioniert hat. Ich habe rund um Google gesucht, konnte aber nichts finden, das mein Problem behebt.

Answer 1

Wenn Sie sich um die Zeilenumbrüche kümmern, handelt es sich nicht mehr um Zeilenumbrüche im Quellcode. Sie sind Leerzeichen-Textknoten im DOM. Sie können eine NodeIterator verwenden, um sie zu finden und zu entfernen:

function removeWhitespace(rootNode) { 
    var nodeIterator = document.createNodeIterator(
    // Node to use as root 
    rootNode, 

    // Only consider nodes that are text nodes 
    NodeFilter.SHOW_TEXT, 

    // Object containing the function to use for the acceptNode method 
    // of the NodeFilter 
    { acceptNode: function(node) { 
     // Accept nodes containing only whitespace 
     if (/^\s*$/.test(node.data)) { 
      return NodeFilter.FILTER_ACCEPT; 
     } else { 
      return NodeFilter.FILTER_SKIP; 
     } 
     } 
    } 
); 

    // Remove every empty text node that is a child of root 
    var node; 

    while ((node = nodeIterator.nextNode())) { 
    node.parentNode.removeChild(node); 
    } 
} 

Diese removeWhitespace Funktion nimmt ein Node, kein jQuery-Objekt, und basiert stark auf das Beispiel auf MDN die Referenz für NodeFilter.

Answer 2

Dies ist White Spaces, kann es so entfernen mit font-size:0 an Behältern und fügen font-size:initial zu untergeordneten Elemente wie folgt aus:

UPDATE

Nach der Prüfung durch @InzeNL dies auch funktionieren wird durch eine JS Hinzufügen Linie row.css('fontSize',0)

$(function() { 
 
    UIresponsive(); 
 
    $(window).resize(UIresponsive); 
 

 
    function UIresponsive() { 
 
    var GRIDWIDTH = 12; 
 

 
    var currentSize = 'Small'; 
 

 
    var rows = $('[class^=UIrow],[class*=" UIrow"]'); 
 
    var columns = $('[class^=UIcolumn],[class*=" UIcolumn"]'); 
 

 
    rows.each(function() { 
 
     var row = $(this); 
 

 
     setSize(row, 'row'); 
 

 
     row.width(row.parent().width() - getWidthDifference(row)); 
 
    }); 
 

 
    columns.each(function() { 
 
     var column = $(this); 
 
     var row = column.parent(); 
 

 
     column.css('display', 'inline-block'); 
 

 
     setSize(column, 'column'); 
 

 
     var columnSize = Number(column.data('UIcolumn' + currentSize + 'Size')); 
 
     var rowSize = Number(row.data('UIrow' + currentSize + 'Size')); 
 

 
     if (isNaN(rowSize)) { 
 
     rowSize = GRIDWIDTH; 
 
     } 
 
     if (columnSize > rowSize) { 
 
     columnSize = rowSize; 
 
     } 
 

 
     column.width(Math.floor(columnSize/rowSize * row.width() - getWidthDifference(column))); 
 
    }); 
 

 
    function setSize(element, type) { 
 
     var elementClass = element.attr('class'); 
 

 
     if (elementClass.indexOf('UI' + type + '-') == 0 || elementClass.indexOf(' UI' + type + '-') >= 0) { 
 
     elementClass.split(' ').forEach(function(value, i) { 
 
      if (value.indexOf('UI' + type + '-') == 0) { 
 
      var sizes = value.replace('UI' + type + '-', '').split('-'); 
 
      if (sizes[0] != undefined) { 
 
       element.data('UI' + type + 'SmallSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'SmallSize', GRIDWIDTH); 
 
      } 
 
      if (sizes[1] != undefined) { 
 
       element.data('UI' + type + 'MediumSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'MediumSize', element.data('UI' + type + 'SmallSize')); 
 
      } 
 
      if (sizes[2] != undefined) { 
 
       element.data('UI' + type + 'BigSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'BigSize', element.data('UI' + type + 'MediumSize')); 
 
      } 
 
      if (sizes[3] != undefined) { 
 
       element.data('UI' + type + 'HugeSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'HugeSize', element.data('UI' + type + 'BigSizeSize')); 
 
      } 
 

 
      element.removeClass(value); 
 
      element.addClass('UI' + type); 
 
      } 
 
     }); 
 
     } else if (element.data('UI' + type + currentSize + 'Size') == undefined) { 
 
     if (type == 'column') { 
 
      element.data('UIcolumnSmallSize', 1); 
 
      element.data('UIcolumnMediumSize', 1); 
 
      element.data('UIcolumnBigSize', 1); 
 
      element.data('UIcolumnHugeSize', 1); 
 
     } else { 
 
      element.data('UIrowSmallSize', GRIDWIDTH); 
 
      element.data('UIrowMediumSize', GRIDWIDTH); 
 
      element.data('UIrowBigSize', GRIDWIDTH); 
 
      element.data('UIrowHugeSize', GRIDWIDTH); 
 
     } 
 
     } 
 
    } 
 

 
    function getWidthDifference(element) { 
 
     return Number(element.css('borderLeftWidth').replace('px', '')) + 
 
     Number(element.css('borderRightWidth').replace('px', '')) + 
 
     Number(element.css('marginLeft').replace('px', '')) + 
 
     Number(element.css('marginRight').replace('px', '')) + 
 
     Number(element.css('paddingLeft').replace('px', '')) + 
 
     Number(element.css('paddingRight').replace('px', '')); 
 
    } 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    outline-offset: 0; 
 
    outline: none; 
 
} 
 

 
.UIrow { 
 
    display: inline-block; 
 
    font-size: 0; 
 
} 
 

 

 
.UIcolumn { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    font-size: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="UIrow-4"> 
 
    <div class="UIcolumn"> 
 
    1 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    2 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    3 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    4 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    5 
 
    </div> 
 
</div> 
 
<div class="UIrow-2 UIcolumn-6"> 
 
    <div class="UIcolumn"> 
 
    6 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    7 
 
    </div> 
 
</div>