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

你看，「西蒂tematici」和「Iscrizione上線」應在第一列，之後「利布里迪德圖」 （他們是同一<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>