Considera il seguente HTML:
<div class='x'>
<ul>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
<li>Number four is a bit longer</li>
<li>Number five</li>
</ul>
</div>
e il seguente CSS:
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
Allo stato attuale, Firefox attualmente lo rende in modo simile al seguente:
• Number one • Number three bit longer
• Number two • Number four is a • Number five
Si noti che il quarto elemento è stato diviso tra la seconda e la terza colonna. Come posso impedirlo?
Il rendering desiderato potrebbe assomigliare a qualcosa di più simile a:
• Number one • Number four is a
• Number two bit longer
• Number three • Number five
o
• Number one • Number three • Number five
• Number two • Number four is a
bit longer
Modifica: la larghezza viene specificata solo per dimostrare il rendering indesiderato. Nel caso reale, ovviamente, non esiste una larghezza fissa.