Question

最近，我遇到了一个问题。如果我在page-break: avoid中使用column-count: 2;（以及相应的浏览器规范前缀），则第一个元素将失败。

HTML代码

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px dotted black">
    <!-- <div class="inner"></div> -->
    <div class="inner" style="background-color: #FFCCCC">
      This is a rather long text to break into three separate lines, but sometimes won't stay in one column
    </div> 
    <div class="inner" style="background-color: #CCFFCC">
      Should be in next column
    </div>
</div>

CSS代码

.outer {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
}
.inner {
  /* overflow: hidden; */
  border: 1px solid #6666FF;
  margin: 0.5em 0;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

小提琴

https://jsfiddle.net/6s7843ue/6/

反修复1：当另一个元素位于损坏的框之前（在HTML代码中取消注释）时，该框不会拆分为两列。然而，我无法做到这一点，因为在某些情况下，只有一个内部元素，这将在右侧与另一个<div>放在一起。

反修复2：如果我通过overflow: hidden为内部元素提供一个新的块渲染上下文，它将起作用。然而，我不能这样做，因为我在内部元素中使用工具提示，并且它们绝对定位<div>，大于内部元素。

反修复3：另外，我不能在我的情况下使用display: flex，因为内部元素的长度不同，并且它们必须低于另一个。设置width: 100%不会解决这个问题 - 而且这很愚蠢，因为我想要阻止。

反修复4：我考虑设置display: table，但在实际情况中，我需要display: flex作为内部元素。即使我将另一个<div>放入<div>，我也担心在页面上使用50个表格元素可能会导致进一步的副作用......

简而言之：为什么page-break: avoid在第一个元素上失败？它适用于Ubuntu下的Firefox 45，但不适用于Windows。它在IE和Edge中失败，但在Chrome中正常工作。

更重要的是：是否有一种解决方案不会导致我的HTML或CSS代码出现严重问题？

Answer 1

请参阅：https://jsfiddle.net/shain/6s7843ue/9/ 不适用于IE，Edge。

.inner {
      /* overflow: hidden; */
      border: 1px solid #6666FF;
      display: flex;
      flex-direction: column;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid;
    }

break-inside：avoid - 第一个元素（IE，Edge，Firefox）忽略CSS

1 个答案: