Question

我正在使用响应式布局的网站上工作，我遇到了一个问题解决较新的CSS多列属性的缺点的问题（http://dev.w3.org/csswg/css3-multicol/）。

当浏览器窗口足够宽时，我将文本分成两部分带有侧栏的列用于较小的图像。多列css 物业运作良好，但他们不太聪明。

第一部分被均匀地分成两个等高的列，但是他们太高了。对于有人阅读本节，他们必须这样做沿着第一列向下滚动，然后返回到第一列的开头接下来阅读其余部分。

第二部分也被分成两个等高的列，但是只有两个句子，所以看起来很尴尬;不是真的足够的内容来证明用户必须阅读的第二列。

在我看来，解决方案就是：

将部分分成具有固定最大高度的子部分。那方式，您可以在不滚动页面的情况下阅读列，而且看起来更多像一篇文章。
将比最大高度短的部分保留为单列。

问题是CSS3多列不能以这种方式工作。我觉得唯一的方法是某种涉及做的javascript解决方案计算字符数，css文本属性和元素维度，然后拆分字符串/追加新的html元素，将内容分配到单独的部分，以使列正确中断。

请记住两件事：

这些列是流体宽度的，因此拾取幻数不起作用。
该过程必须是可逆的，因此响应式布局可以在较窄的浏览器宽度下切换回1列。

有点棘手，但我认为它可能足以尝试。有没有人听说有人在那里可能正在解决这个问题呢？或者如果没有，你对如何设置有任何想法算法一起用于此？

非常感谢你的帮助。

13年1月8日

为了澄清，这里是响应式设计的预期模式的一些图像。（因为我是SO的新人，只有两个链接）

模式1：移动的单列线性化

模式2. Single-column with sidebar for iPad / narrow browser windows

模式3. Two-column for wide browser windows

模式3是问题所在。第一部分的内容太长，无法放在一个页面上，因此在这种情况下，我将其划分为适合浏览器高度的行。这就是我正在寻找的JavaScript解决方案。

Answer 1

我认为你所追求的是这个 - ＆gt; http://codepen.io/justincavery/full/KsjHa

我在这里做的是使用jquery来检查内容div中字符数的计数。

var $div = $( '#blah' );
if($div.text().length >= 600) {
$div.addClass('columns');
}

如果字符数等于或大于600，则会将“列”类添加到包含div中。

为了清楚起见，这意味着任何少于600个字符的文章都不会应用“列”类，任何超过600个字符的文章都不会。

现在我们已经将DOM排序到CSS（请注意，此codepen有一些与此答案无关的样式，因此请仅作为指导使用。）

下一个阶段是为超过600个字符的内容添加列，但我们仍然需要确保在较小的宽度上我们只有一个列，否则它看起来很奇怪。

@media screen and (min-width:48em) {
 /*     48.000em /*(ackkkkkk, device specific bad)768px*/
  .columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}
}

在这里，我选择48ems和更高（ipad portrait and up）作为定义列的点，允许任何较小的屏幕为单列。

我后来提到的一个问题是，如果文本太长，你希望它再次出现在一个列中。在这种情况下，您需要删除类以获得更高的值，或者检查字符数是否在两个值之间。

你可能还注意到我开始研究一个垂直媒体查询，它将背景设置为粉红色，将内容设置为两列，但它无法达到你想要的效果。

这个问题正在研究这种技术的几点。

我从图片中实际上并没有意识到他们是两个独立的部分，直到我第三次阅读这个问题。大多数人会认为左栏中的内容继续到页面底部，然后转到右栏（ala报纸和杂志）。你需要在每个部分之间进行某种休息来表明这一点。
这是一个设计的东西，所以我认为它主要用于登陆/教学页面，你希望在这些页面中加入更多的工作来设计内容。考虑到这一点，您应该通过手动添加类来定制它。
最后，网页不打印，人们可以在一个页面上阅读，查看“The Great Discontent”的阅读效果如何

修改

更新问题后，我认为您正在寻找的实施工作是在这项优秀的工作上完成的 - http://kaikkonendesign.fi/typesetting-responsive-css3-columns/

Answer 2

你可以单独用CSS做到这一点：

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

希望这会有所帮助。

在响应式布局中管理文本列

2 个答案:

修改