CSS多列布局（Multi-column）的断裂控制：`break-inside`与`orphans`的算法 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 多列布局（Multi-column）的断裂控制：`break-inside` 与 `orphans` 的算法

大家好，今天我们来深入探讨 CSS 多列布局中的断裂控制机制，特别是 break-inside 和 orphans 这两个属性。理解它们的工作原理对于创建优雅、可读性强的多列布局至关重要。

多列布局简介

在开始之前，我们快速回顾一下 CSS 多列布局的基本概念。多列布局允许我们将一个容器的内容划分成多个列，类似于报纸或杂志的排版方式。关键的 CSS 属性包括：

column-count: 指定列的数量。
column-width: 指定列的理想宽度。浏览器会根据可用空间和内容自动调整列的数量。
column-gap: 设置列之间的间距。
column-rule: 设置列之间的分隔线样式（颜色、宽度、样式）。
columns: 简写属性，同时设置 column-width 和 column-count。

例如：

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid black;
}

这段代码会将 .container 的内容分成三列，列间距为 20px，列之间有一条黑色的 1px 实线。

`break-inside`：控制元素内部的断裂

break-inside 属性用于控制元素内部是否允许发生列断裂。换句话说，它告诉浏览器在渲染多列布局时，是否允许将一个元素的内容分割到不同的列中。

break-inside 属性可以取以下值：

auto: 默认值。浏览器可以自动决定是否在元素内部进行断裂。
avoid: 尽力避免在元素内部进行断裂。如果元素过大，无法完整地放入一列，则整个元素会被移动到下一列。
avoid-column: 避免在元素内部产生列断裂。与 avoid 类似，但只针对列断裂，不影响分页断裂。
avoid-page: 避免在元素内部产生页断裂。主要用于打印样式，与列断裂无关。
avoid-region: 避免在元素内部产生区域断裂。主要用于 CSS Regions，与列断裂无关。

示例：避免段落断裂

假设我们有一个包含多个段落的容器，并且我们希望每个段落都完整地显示在同一列中，而不是被分割到不同的列中。我们可以使用 break-inside: avoid; 来实现这个目标。

<div class="container">
  <p>This is the first paragraph. It should not be split across columns.</p>
  <p>This is the second paragraph. It should also not be split.</p>
  <p>This is the third paragraph. And so on...</p>
</div>

.container {
  column-count: 3;
}

p {
  break-inside: avoid; /* 或 break-inside: avoid-column; */
}

在这个例子中，每个 <p> 元素都会尝试保持完整。如果一个段落无法完全放入当前列，它将会被移动到下一列。

break-inside: auto 的行为

当 break-inside 设置为 auto 时，浏览器会根据自身的算法来决定是否进行断裂。这个算法通常会考虑以下因素：

元素的大小：较小的元素更容易被完整地放置在一列中。
可用空间：如果列的剩余空间足够大，元素更有可能被放置在当前列中。
其他元素的布局：浏览器会尝试优化整体布局，以避免产生过多的空白或不均匀的列高。

不同浏览器的兼容性问题

虽然 break-inside 属性已经得到了广泛的支持，但在一些旧版本的浏览器中可能存在兼容性问题。为了确保最佳的兼容性，建议使用 vendor prefixes：

p {
  -webkit-column-break-inside: avoid; /* Safari & Chrome */
  break-inside: avoid;
}

需要注意的是，vendor prefixes 通常只在旧版本的浏览器中才需要使用。对于现代浏览器，标准属性就足够了。

`orphans`：控制孤儿行的数量

orphans 属性用于指定在元素被分割到下一列、下一页或下一个区域时，必须保留在元素第一部分的最小行数。这个属性主要用于控制文本块的断裂，以避免出现“孤儿行”的现象。

什么是孤儿行？

孤儿行是指一个段落的第一行单独出现在上一列、上一页或上一区域的底部，而段落的其余部分出现在下一列、下一页或下一区域的顶部。这会影响可读性和美观性。

orphans 的取值

orphans 属性接受一个整数作为值，表示必须保留的最小行数。默认值为 2。

示例：避免孤儿行

假设我们有一个长段落，并且我们希望确保在段落被分割到下一列时，至少有 3 行保留在当前列的底部。

<div class="container">
  <p>
    This is a long paragraph of text that will likely be split across multiple columns.
    We want to avoid orphan lines at the bottom of the first column.
    Therefore, we will use the orphans property to ensure that at least 3 lines
    remain in the first column if the paragraph is split.
    This is the end of the paragraph.
  </p>
</div>

.container {
  column-count: 3;
}

p {
  orphans: 3;
}

在这个例子中，如果段落需要被分割到下一列，浏览器会尝试确保在第一列的底部至少保留 3 行文本。如果只有 2 行或更少，整个段落可能会被移动到下一列（如果空间允许），或者浏览器会尝试调整断裂点，以满足 orphans 的要求。

orphans 的算法

orphans 属性影响断裂点的选择。浏览器会尝试找到一个断裂点，使得在断裂之前至少有指定数量的行。如果找不到这样的断裂点，浏览器可能会忽略 orphans 属性，或者采取其他策略来优化布局。

以下是 orphans 算法的简化描述：

确定潜在的断裂点： 浏览器会分析元素的内容，找出所有可能的断裂点（例如，行尾、单词之间）。
评估每个断裂点： 对于每个潜在的断裂点，浏览器会计算在断裂之前剩余的行数。
应用 orphans 规则： 如果剩余的行数小于 orphans 的值，则该断裂点被视为无效。
选择最佳断裂点： 在所有有效的断裂点中，浏览器会选择一个最佳的断裂点，通常是使得列高尽可能均匀的断裂点。
如果没有有效的断裂点： 如果没有找到满足 orphans 要求的断裂点，浏览器可能会忽略 orphans 属性，或者尝试调整布局，例如减小列宽或增加列高，以创建更多的空间。

orphans 与 widows

orphans 属性与 widows 属性密切相关。 widows 属性用于指定在元素被分割到下一列、下一页或下一区域时，必须保留在元素第二部分的最小行数。换句话说，widows 控制的是“寡妇行”的数量，即段落的最后一行单独出现在下一列、下一页或下一区域的顶部。

orphans 和 widows 通常一起使用，以确保文本块的断裂既不会产生孤儿行，也不会产生寡妇行。

示例：同时使用 orphans 和 widows

p {
  orphans: 3;
  widows: 3;
}

在这个例子中，我们要求在段落被分割时，至少有 3 行保留在第一部分，并且至少有 3 行保留在第二部分。

orphans 的局限性

orphans 属性并不能保证完全消除孤儿行。浏览器的布局引擎会尽力满足 orphans 的要求，但如果由于空间限制或其他因素，无法找到满足条件的断裂点，浏览器可能会忽略 orphans 属性。

此外，orphans 属性只影响文本块的断裂。它对图像、表格或其他非文本内容的断裂没有影响。

实际应用场景

break-inside 和 orphans 属性在许多实际应用场景中都非常有用。

1. 新闻网站或博客

在新闻网站或博客中，文章通常会被分成多个列，以提高可读性。使用 break-inside: avoid; 可以避免文章标题、图片说明或引用被分割到不同的列中。使用 orphans 和 widows 可以确保段落的断裂更加优雅，避免出现孤儿行或寡妇行。

2. 产品目录

在产品目录中，每个产品的信息（包括图片、名称、描述和价格）应该完整地显示在同一列中。使用 break-inside: avoid; 可以确保每个产品的信息不会被分割到不同的列中。

3. 简历

在简历中，每个部分（例如，教育经历、工作经历、技能）应该完整地显示在同一列中。使用 break-inside: avoid; 可以确保每个部分不会被分割到不同的列中。

4. 打印样式

break-inside 和 orphans 属性在打印样式中也非常重要。我们可以使用 break-inside: avoid-page; 来避免元素在页面之间断裂。我们可以使用 orphans 和 widows 来确保段落的断裂在打印输出中更加美观。

总结与最佳实践

属性	作用	常用值	适用场景
`break-inside`	控制元素内部是否允许发生列、页或区域断裂	`auto`, `avoid`	避免标题、图片说明等元素被分割到不同的列中；控制打印输出时的分页断裂。
`orphans`	指定在元素被分割时，必须保留在元素第一部分的最小行数，避免孤儿行	整数（默认值为 2）	确保文本块的断裂更加优雅，避免出现孤儿行；在打印样式中尤其重要。
`widows`	指定在元素被分割时，必须保留在元素第二部分的最小行数，避免寡妇行	整数（默认值为 2）	确保文本块的断裂更加优雅，避免出现寡妇行；与 `orphans` 属性一起使用，效果更好。

为了更好地使用 break-inside 和 orphans 属性，以下是一些最佳实践：

明确需求： 在应用这些属性之前，首先要明确你的布局需求。确定哪些元素应该避免断裂，以及你希望如何控制文本块的断裂。
谨慎使用 break-inside: avoid;： 虽然 break-inside: avoid; 可以避免元素断裂，但过度使用可能会导致列高不均匀或产生过多的空白。
同时使用 orphans 和 widows： 为了获得最佳的文本断裂效果，建议同时使用 orphans 和 widows 属性。
测试和调整： 在不同的浏览器和设备上测试你的布局，并根据需要调整 break-inside、orphans 和 widows 的值，以获得最佳的视觉效果。

一些提示

break-inside 和 orphans 属性主要用于控制块级元素的断裂。
这些属性对行内元素没有直接影响。
浏览器的布局引擎会尽力满足这些属性的要求，但可能会受到空间限制或其他因素的影响。

总结

break-inside 和 orphans 属性是 CSS 多列布局中重要的断裂控制工具。通过合理地使用这些属性，我们可以创建更加优雅、可读性强的多列布局，并避免出现不必要的断裂和孤儿行。理解这些属性的工作原理，并在实际项目中灵活运用，将有助于提升你的 CSS 技能。

更多IT精英技术系列讲座，到智猿学院