处理 Multicol 中的溢出

在本指南中,我们将了解 multicol 如何处理溢出,包括在列框内以及内容超出容器容量的情况。

column boxes 内部溢出

当子项的大小大于列框时,就会发生溢出。例如,当列中的图像宽度大于 column-width 值或基于 column-count 声明的列数生成的列宽度时,就可能会发生这种情况。

在这种情况下,内容溢出(并且是可见的)到下一列,而不是被列框裁切。你可以在下面的示例中看到,在编写本文时,浏览器以不同的方式处理预期的呈现图像。

如果你想要一个图像尺寸缩小到适合列框,标准的响应式的解决方案是设置最大宽度:100%。

更多的列

如何处理溢出的列取决于是在一个片段化的媒体上下文(比如打印)中,还是在一个连续的媒体上下文(比如 web 页面)中。

在一个片段化的媒体中,一旦碎片(例如页面)中充满了列,多出的列将移至新页面。在连续介质中,列将沿横向溢出。在 web 上,这意味着水平滚动条的出现。

下面的示例显示了这种溢出行为。multicol 容器有一个高度,列的文本多于空间,因此多出的列会在容器外面出现。

本规范的未来版本中,会允许横向溢出的列向下排列,用户能向下滚动鼠标查看溢出的列。

使用纵向的媒体查询

multicol 在 web 上的一个问题:如果你的列比 viewport 高,读者需要上下滚动来阅读,这样的用户体验不好。避免这种情况的一种方法是,只有在有足够的高度时才应用列属性。

在下面的示例中,我们使用了 min-height

在本系列的最后一篇指南中,我们将看到片段化下的 Muticol 如何使用的规范,去控制列内容的溢出。