html - CSS3 : clipping parent and two-column child: mixing balanced and non-balanced column-fill

Question

在我的文档中有一个父 div固定高度和两列子元素 div .

<div id="parent">
    <div id="child">Text</div>
</div>

仅使用 CSS3，我试图通过以下方式将子项的两列布局与父项的溢出裁剪携手合作:

当子元素包含很少的文本时，它不应该平衡两列，即它应该表现得像 column-fill: auto

如果第一列会超出父列的底部，则子项的文本应包含在第二列中

但是，当子文本的数量超过父框的容量时，子的列应该是平衡的，父应该剪辑子框，在右侧垂直滚动条。

Answer 1

简而言之，在撰写本文时，您无法使用纯 css3 做您想做的事。您想要的目标 API 是 CSS3 Multiple Columns .如果您查看规范中的示例，您会发现它不是使用在给定元素上同时混合平衡和非平衡(顺序)列填充的用例编写的。

编写规范是为了在不同的时间实现这两种技术，因此与您的请求相似(但最终略有不同)的功能。然而，我们可以实现您的目标功能 不过，在 javascript 的帮助下!下面的解释和代码在 Chrome 38 和 FF 33 IE 11 上测试。

如果您想学习一些知识，请查看 mutationobserver这可能会减轻您在评论中的担忧(不知道开发人员动态更改内容)。它允许我们跟踪 dom 更改并适本地设置类。我的第一次尝试成功了，但没有跨浏览器，请在回滚之前查看编辑修订版。

我将把你的三个要求称为状态。

概述

状态 1 和状态 2 共享相同的 css ( column-fill:auto )。

状态 3 由于多列规范需要不同的 css 规则( column-fill:balance )。

只有当状态 1 和状态 2 不能包含所有文本(即溢出)时，才需要状态 3 的规则来实现所需的功能。

在 javascript 的帮助下，我们可以在状态 1 和状态 2 溢出时应用状态 3 的类更改。

相反，如果内容被删除，我们可以重新应用状态 1 和 2 的类

css 属性 column-count是跨越给定父元素的列数。在您的情况下，我们需要 2。

实现状态 1 和状态 2

每当您设置列元素的高度时，当空间不足时，浏览器将向外渲染更多列。列宽是目标跨度的宽度。因此，必须设置高度才能按顺序填充列(根据您的要求，“如 column-fill:auto”)。请参阅下面的代码片段，“ origState”的 css 规则适用于状态 1 和 2。

达到状态 3

然而，这种状态给我们带来了一个问题。 设置列的高度时溢出会产生更多与原始列宽度相同的列 .现在你想让它表现得像 column-fill:balance具有无限的高度，可以滚动。当您想使用顺序填充(即 column-fill:auto )时，这在 css3 多列规范中是无法实现的。但是，当列中没有设置高度并且高度在父级中设置时(具有适当的滚动 css 值)，我们可以实现您想要的。请参阅下面的代码片段，“ overFlowState ”的 css 规则适用于状态 3，注意高度已被移除。

完整解决方案

现在我们必须将两个目标功能请求放在一起。您必须确定何时将第二个类应用于子容器，这可以通过检查状态 1 和 2 上的溢出来完成。一旦将元素添加到 dom/domready，您就可以进行此检查。 (本来打算自己写，但借用了 javascript 函数来检查 this post 的溢出)。请参阅 JavaScript 的代码片段。

function isOverflowed(element){
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
var elements = document.getElementsByClassName("origState");
for(var i = 0; i < elements.length; i++){
    var element = elements[i];
    if(isOverflowed(element)){
       element.className = "overFlowState";
       i--;
    }
}

.parent{
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
    height:7em;
}
.origState{
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
    -moz-column-fill:auto;
    height:inherit;
}
.overFlowState{
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
}

<div class="parent">
    <div class="origState">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
<div class="parent">
    <div class="origState">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
        </div>
</div>
<div class="parent">
    <div class="origState">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
        </div>
</div>

结论

手头的问题是，当设置了高度时，列内容的溢出应该会生成更多的列。我们可以通过删除css中的列高来按预期获得带有父级的滚动区域。我们可以通过在 javascript 的帮助下交换类名来将两者结合在一起。