css - 多列 CSS 不能正确中断

Question

我有一个 CSS 多列:它在 Firefox 中很好(<ul> 内容没有“损坏”)但在 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>