Question

我有一个CSS多列：它在Firefox中很好（<ul>内容没有被破坏＆＃39;）但不在Chrome上（一些应该在第一列的项目被分成第二列）。环顾四周，我找到了this solution，但它似乎无法在我放置代码的任何地方工作。

这是一个完整的代码段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

你看，＆＃34; Siti tematici＆＃34;和＃34; Iscrizione On Line＆＃34;应该在第一栏，就在＆＃34; Libri di testo＆＃34; （它们属于同一个<ul>）：相反，它们会进入第二列。

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

任何想法都要以正确的方式打破列，以保留省略号吗？

Answer 1

您应该在break-inside:avoid

上使用li

在此处查看更多＆gt; 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没有正确破解

1 个答案: