多列 CSS 未正确中断

Question

我有一个 CSS 多列：它在 Firefox 中没有问题（<ul> 内容不是 'broken'）但在 Chrome 中没有（一些应该在第一列被分成第二列）。环顾四周，我发现 this solution，但它似乎在我放置代码的任何地方都不起作用。

这是一个完整的片段：

.margin-bottom-0 { margin-bottom: 0; }
.double > ul {
  columns: 2;
  padding: 0;
}
.double > ul ul {
  padding-left: 10px;
  list-style: circle;
}
.double > ul ul li {
  padding-left: 5px;
}
.double li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-position: inside;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="double">
        <ul class="list-unstyled margin-bottom-0">
          <li><a href="#">Area docenti</a>
            <ul>
              <li><a href="#">Docenti e classi</a></li>
            </ul>
          </li>
          <li><a href="#">Area segreteria</a>
            <ul>
              <li><a href="#">Organigramma</a></li>
              <li><a href="#">D. S. G. A.</a></li>
              <li><a href="#">U. R. P.</a></li>
              <li><a href="#">Comunicazioni interne personale ATA</a></li>
              <li><a href="#">Programma annuale</a></li>
              <li><a href="#">Modulistica</a></li>
              <li><a href="#">SIDI - Miur</a></li>
            </ul>
          </li>
          <li><a href="#">Area genitori</a>
            <ul>
              <li><a href="#">Rappresentanti dei genitori</a></li>
              <li><a href="#">Ricevimento docenti</a></li>
              <li><a href="#">Patto di corresponsabilità</a></li>
              <li><a href="#">Libri di testo</a></li>
              <li><a href="#">Siti tematici</a></li>
              <li><a href="#">Iscrizioni On Line</a></li>
            </ul>
          </li>
          <li><a href="#">Area alunni</a>
              <ul>
                  <li><a href="#">Viaggi di istruzione</a></li>
                  <li><a href="#">Materiale didattico</a></li>
                  <li><a href="#">Concorsi</a></li>
                  <li><a href="#">Visite guidate</a></li>
                  <li><a href="#">Attività e progetti</a></li>
              </ul>
          </li>
          <li><a href="#m">Il Dirigente</a></li>
          <li><a href="#">Organi collegiali</a></li>
          <li><a href="#">Piano di lavoro</a>
            <ul>
              <li><a href="#">POF</a></li>
              <li><a href="#">PTOF</a></li>
              <li><a href="#">PON</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

你看，"Siti tematici" 和 "Iscrizione On Line" 应该在第一列，就在 "Libri di testo" 之后（它们是同一个 <ul> 的一部分）：相反，它们继续第二栏。

进一步观察，我发现 overflow: hidden;（我需要省略号）是导致 Firefox 正确行为和 Chrome 错误行为的原因：如果我删除该行，Firefox 和Chrome 显示（错误）'broken' <ul>，但至少它们是一致的...

是否知道以正确的方式分隔列以保持省略号？

Answer 1

您应该在 li

上使用 break-inside:avoid

在这里查看更多 > break inside

下面的代码片段：

.margin-bottom-0 {
  margin-bottom: 0;
}

.double >ul {
  columns: 2;
  padding: 0;
}

.double > ul ul {
  padding-left: 10px;
  list-style: circle;
}

.double > ul ul li {
  padding-left: 5px;
}

.double li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="double">
        <ul class="list-unstyled margin-bottom-0">
          <li><a href="#">Area docenti</a>
            <ul>
              <li><a href="#">Docenti e classi</a></li>
            </ul>
          </li>
          <li><a href="#">Area segreteria</a>
            <ul>
              <li><a href="#">Organigramma</a></li>
              <li><a href="#">D. S. G. A.</a></li>
              <li><a href="#">U. R. P.</a></li>
              <li><a href="#">Comunicazioni interne personale ATA</a></li>
              <li><a href="#">Programma annuale</a></li>
              <li><a href="#">Modulistica</a></li>
              <li><a href="#">SIDI - Miur</a></li>
            </ul>
          </li>
          <li><a href="#">Area genitori</a>
            <ul>
              <li><a href="#">Rappresentanti dei genitori</a></li>
              <li><a href="#">Ricevimento docenti</a></li>
              <li><a href="#">Patto di corresponsabilità</a></li>
              <li><a href="#">Libri di testo</a></li>
              <li><a href="#">Siti tematici</a></li>
              <li><a href="#">Iscrizioni On Line</a></li>
            </ul>
          </li>
          <li><a href="#">Area alunni</a>
            <ul>
              <li><a href="#">Viaggi di istruzione</a></li>
              <li><a href="#">Materiale didattico</a></li>
              <li><a href="#">Concorsi</a></li>
              <li><a href="#">Visite guidate</a></li>
              <li><a href="#">Attività e progetti</a></li>
            </ul>
          </li>
          <li><a href="#m">Il Dirigente</a></li>
          <li><a href="#">Organi collegiali</a></li>
          <li><a href="#">Piano di lavoro</a>
            <ul>
              <li><a href="#">POF</a></li>
              <li><a href="#">PTOF</a></li>
              <li><a href="#">PON</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

多列 CSS 未正确中断

Multicolumn CSS doesn't break properly

css

html-lists

css-multicolumn-layout