我正在使用 jQuery、Modernizr 和一些插件（jQuery.dotdotdot、MixItUp）设计一个网站。作为基础，我从 codyhouse 中选择了这项工作。因此，MixItUp 功能（过滤）效果很好，我没有任何问题。
当我想<img>用 a替换原件<div>并添加一些内容时，问题就来了。文本可能会溢出，所以我添加了 jQuery.dotdotdot 插件来很好地裁剪文本。因此，我添加了我的自定义 JavaScript 代码：
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
我猜这很简单。当我触发菜单时，所有框都正确对齐且整齐，但是当它折叠时，那些被 jQuery.dotdotdot 修剪的文本弄乱了所有网格。如何摆脱那些？
我在下面创建了一个带有一些示例数据的片段:-)
window.onload = function() {
$(document).ready(function() {
$('#MixItUp').find('> li.mix > div.grid-square').each(function() {
$(this).dotdotdot({
watch: $(this)
});
});
});
}/* solution to the blank gaps problem */
.grid-square {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive farm</title>
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://codyhouse.co/demo/content-filter/css/style.css">
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/modernizr.js"></script>
</head>
<body>
<header class="cd-header">
<h1>Farm data</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="filter"><a href="/session/logout/">LOGOUT</a>
</li>
</ul>
<!-- cd-filters -->
</div>
<!-- cd-tab-filter -->
</div>
<!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul id="MixItUp">
<li style="display: inline-block" class="mix topic-C work_phase-B type-D NORA10_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NORA10_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NORA10_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of wind and surface-wave parameters at the location of the FINO3 met mast. Values comprise three-hourly sampled wind speed and direction at 10, 100 and 150 m; significant wave height; and dominant wave period and
direction. Supplied by Metno from their NORA10 reanalysis - horizontal resolution 10 km.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_clin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_clin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_clin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the curvilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Plot of the location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-D NRWF_bline_rlin_layout.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: NRWF_bline_rlin_layout.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/NRWF_bline_rlin_layout.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Location of installations in the rectilinear layout.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-L work_phase-B type-P Pres_May15_RWF.pdf">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: Pres_May15_RWF.pdf</p>
<p>
<label class="att-name">Information type</label>: Reports, presentations & working papers</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Layouts, wakes & loads</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/Pres_May15_RWF.pdf">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Presentation on Uni Research's work on baseline specification of the RWF.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.jpg">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.jpg</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.jpg">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_10_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_10_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_10_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_10_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 10 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.png">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.png</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.png">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Wind-rose plot of data in vol_flux_15_deg_bin_wind_rose_fino3.txt.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_15_deg_bin_wind_rose_fino3.txt">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_15_deg_bin_wind_rose_fino3.txt</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_15_deg_bin_wind_rose_fino3.txt">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Joint histogram of magnitude and direction of volume flux of air through an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Sample counts at 10 s resolution over 2000-10 broken down
by flux magnitude, bin size 1 m s-1, and flux direction, bin size 15 degs. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li style="display: inline-block" class="mix topic-C work_phase-B type-D vol_flux_tseries_fino3.csv">
<div class="grid-square" style="background-color: beige">
<p>
<label class="att-name">File name</label>: vol_flux_tseries_fino3.csv</p>
<p>
<label class="att-name">Information type</label>: Data files</p>
<p>
<label class="att-name">Work phase</label>: Baseline</p>
<p>
<label class="att-name">Wind farm topic</label>: Site characterisation</p>
<p>
<label class="att-name">Uploaded by</label>: angus
</p>
<p><a href="/media/tree/2015/06/30/vol_flux_tseries_fino3.csv">Download</a>
</p>
<p>
<label class="att-name">Description</label>:
<br>
<br/>Time series over 2000-10 of the estimated wind forcing of an isolated ideal WT, dimensions those of the DTU 10 MW reference WT, at the location of the FINO3 met mast. Values comprise hourly-sampled magnitude and direction of the volume flux
through the rotor. Derived using results from a downscaling of the ERA-Interim reanalysis of ECMWF with WRF, at 3 km horizontal resolution.</p>
</div>
</li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section>
<!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4 class="is-open">Search</h4>
<div class="cd-filter-content">
<input placeholder="Try file name..." type="search">
</div>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Information type</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="typeRadioButton" id="type-ALL" checked="" type="radio">
<label class="radio-label" for="type-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".type-D" name="typeRadioButton" id="type-D" type="radio">
<label class="radio-label" for="type-D">Data files</label>
</li>
<li>
<input class="filter" data-filter=".type-P" name="typeRadioButton" id="type-P" type="radio">
<label class="radio-label" for="type-P">Reports, presentations & working papers</label>
</li>
<li>
<input class="filter" data-filter=".type-S" name="typeRadioButton" id="type-S" type="radio">
<label class="radio-label" for="type-S">Software</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Work phase</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="phaseRadioButton" id="work_phase-ALL" checked="" type="radio">
<label class="radio-label" for="work_phase-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-B" name="phaseRadioButton" id="work_phase-B" type="radio">
<label class="radio-label" for="work_phase-B">Baseline</label>
</li>
<li>
<input class="filter" data-filter=".work_phase-P" name="phaseRadioButton" id="work_phase-P" type="radio">
<label class="radio-label" for="work_phase-P">Post baseline</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Wind-farm topic</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" name="topicRadioButton" id="topic-ALL" checked="" type="radio">
<label class="radio-label" for="topic-ALL">All</label>
</li>
<li>
<input class="filter" data-filter=".topic-C" name="topicRadioButton" id="topic-C" type="radio">
<label class="radio-label" for="topic-C">Site characterisation</label>
</li>
<li>
<input class="filter" data-filter=".topic-L" name="topicRadioButton" id="topic-L" type="radio">
<label class="radio-label" for="topic-L">Layouts, wakes & loads</label>
</li>
<li>
<input class="filter" data-filter=".topic-M" name="topicRadioButton" id="topic-M" type="radio">
<label class="radio-label" for="topic-M">Management, operations & costs</label>
</li>
</ul>
<!-- cd-filter-content -->
</div>
<!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div>
<!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Menu</a>
</main>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery-2.1.1.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/jquery.mixitup.min.js"></script>
<script type='text/javascript' src="http://codyhouse.co/demo/content-filter/js/main.js"></script>
</body>
</html>