Question

我目前正在开发自己的网格大小的框架。到目前为止，它正如我所希望的那样工作。但是，列之间有这个空间。（请参阅此JSFiddle）

我已经发现这个空间存在的原因是因为HTML中的换行符。

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

你没有在第二行看到这个空格，我删除了两列之间的换行符，并且两者之间没有任何空格。

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

我正在寻找一种自动删除所有这些换行符的方法。当页面变得越来越大时，手动执行此操作不是一种选择。

我尝试使用$('body').html($('body').html().replace('\n',''))删除换行符，这肯定不起作用。我在Google上搜索过，但找不到任何解决我问题的方法。

Answer 1

这是空格，因此可以使用容器上的font-size:0将其删除，并将font-size:initial添加到子元素中，如下所示：

<强>更新

经过@InzeNL测试后，这也可以通过添加JS行row.css('fontSize',0)

来实现

＆＃13;

$(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', ''));
    }
  }
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

当您关心换行符时，它们不再是源代码中的换行符。它们是DOM中的空白文本节点。您可以使用NodeIterator查找并删除它们：

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);
  }
}

此removeWhitespace函数采用Node而不是jQuery对象，并且在很大程度上基于MDN对NodeFilter的引用的示例。

自动从HTML文件中删除换行符

2 个答案: