Considérez le code HTML suivant:
<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>
et le CSS suivant:
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
Dans l'état actuel des choses, Firefox rend actuellement ceci de la manière suivante:
• Number one • Number three bit longer
• Number two • Number four is a • Number five
Notez que le quatrième élément a été divisé entre la deuxième et la troisième colonne. Comment puis-je empêcher cela?
Le rendu souhaité pourrait ressembler à quelque chose de plus:
• Number one • Number four is a
• Number two bit longer
• Number three • Number five
ou
• Number one • Number three • Number five
• Number two • Number four is a
bit longer
Modifier: la largeur est uniquement spécifiée pour illustrer le rendu indésirable. Dans le cas réel, il n'y a bien sûr pas de largeur fixe.