break-inside

Avatar of Katy DeCorah
Katy DeCorah

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

列在内容流动和平衡方面做得很好。 不幸的是,并非所有元素都能流畅地流动。 有时元素会卡在列之间。

幸运的是,您可以告诉浏览器使用 break-inside 将特定元素保持在一起。

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

目前,该属性普遍接受 autoavoid 值。

在多列布局中的元素上使用 avoid,以防止属性分开。

再仔细看看此属性的语法,因为浏览器之间存在一些差异。

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

该属性效仿 分页符 属性,并共享相同的值。 目前,Firefox 使用 page-break-inside

其他资源

浏览器支持

分页符属性

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
10813211108TP

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0

多列布局支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
130132101210

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.0-10.2