响应式列和柱化器插件 - 如何停止文本在特定点处进行包装/停止？ [英] Responsive columns and the columnizer plugin - How can I stop the text from wrapping/stopping at the certain point?

问题描述

我正在研究一个小项目来学习html / CSS并使用Columnizer插件。

问题：

该项目是一个响应式表格。如果我调整窗口大小，布局会改变并适应新的窗口大小。我想阻止类别标题出现在列的末尾。例如这。

理想情况下，我会设置手动规则。例如，将标题粘贴到表格的前两行（并且让它只在后面的任何位置打破/分割），并且使最后两行不可能位于列顶部。

我尝试过：

Columnizer包含两个名为 dontsplit& dontend（都适用于JavaScript），我试图使用。根据文档，它确实如此：

具有CSS类dontsplit的任何节点都不会被拆分为多个列。这是方便的，以确保表等，如果他们着陆在列的底部不会被切成两半。

&

具有CSS类dontend的任何节点都不会放在列的末尾。 b $ b

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

没有工作：

 < div class = dontsplit> 
< h2>类别标题< / h2> 
< table class =table table-hover> 
< tr>< td WIDTH =67％>< a href =http://www.google.comclass =title>标题在这里< / a>< / td>< td class =vert-align>描述< / td>< / tr> 
< tr>< td>< a href =http://www.google.comclass =title>标题在这里< / a>< / td>< td类= VERT对齐 >说明与LT; / TD>< / TR> 
< tr>< td>< a href =http://www.google.comclass =title>标题在这里< / a>< / td>< td类= VERT对齐 >说明与LT; / TD>< / TR> 
< / div> 
  

如何正确使用它们？或者是有另一种简单的方法来做到这一点？

谢谢

http://jsfiddle.net/vqsd8x16/

解决方案

  var defaults = {
 //列的默认宽度
 width：400px，
  

更改代码以使像素可以解决您的问题。

I'm working on a little project to learn html/CSS and use the Columnizer plugin.

The problem:

The project is a responsive table. If I resize the window the layout changes and adapts to the new window size. I want to prevent the "category titles" from being at the end of a column. For example like this.

Ideally I'd set manual rules. For example make the title stick to the first two rows of the table (and let it only break/split anywhere after that) and make it impossible that the last two lines are alone at the top of a column.

What I've tried:

Columnizer includes two CSS classes called "dontsplit" & "dontend" (both apply javascript) that I'm trying to use. According to the documentation it does that:

Any node that has the CSS class "dontsplit" won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.

&

Any node that has the CSS class "dontend" will never be put at the end of a column.

The problem is that I can't seem to make it work. For example adding the "dontend" to the Category Title will not change anything. And the dontsplit (I use it in a ) always automatically applies "dontsplit" to everything as if the wouldn't have a closing tag.

Didn't work:

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

How can I use them correctly? Or is there another simple way to do this?

Thanks

http://jsfiddle.net/vqsd8x16/

解决方案

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

change in your code to have pixels will fix your problem.

这篇关于响应式列和柱化器插件 - 如何停止文本在特定点处进行包装/停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！