Javascript 响应列和列生成器插件-如何阻止文本在特定点换行/停止？

我正在做一个学习html/CSS和使用Columnizer插件的小项目

问题：

该项目是一个响应表。如果我调整窗口大小，布局会改变并适应新的窗口大小。我想防止“类别标题”出现在列的末尾。比如我喜欢

理想情况下，我会设定手动规则。例如，将标题粘贴到表的前两行（并使其仅在其后的任何位置断开/拆分），并使最后两行不可能单独位于列的顶部

我所尝试的：

Columnizer包括我尝试使用的两个CSS类“dontsplit”和“dontend”（都应用javascript）。根据文件，它可以做到：

任何具有CSS类“dontsplit”的节点都不会被拆分为多个列。这很方便，可以确保表等在列底部时不会被切成两半

&

任何具有CSS类“dontend”的节点都不会放在列的末尾

问题是我似乎无法让它工作。例如，在类别标题中添加“dontend”不会改变任何内容。而dontsplit（我在a中使用它）总是自动地将“dontsplit”应用于所有内容，就好像没有结束标记一样

不起作用：

<div class="dontsplit">
<h2>Category Title</h2>
                    <table class="table table-hover" >  
                                <tr><td WIDTH="67%"><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
                                <tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
                                <tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
</div>

类别名称
描述
描述
描述

如何正确使用它们？还是有其他简单的方法可以做到这一点

谢谢

---

将代码更改为像素将解决您的问题。

对我来说似乎没有任何改变/改进。您试过了吗？我试过了，在您提供的jsfidle中，我也试过添加

max width

和

min width

var defaults = {
            // default width of columns
            width:400px,