Comment empêcher le saut de colonne dans un élément ?

Question

Considérons 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 code CSS suivant:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Comme il est, Firefox actuellement rend cette façon similaire à la suivante:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Notez que le quatrième point a été divisé entre la deuxième et la troisième colonne. Comment puis-je éviter cela?

Le rendu souhaité pourrait ressembler à quelque chose comme:

• 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

Edit: La largeur n'est spécifié que pour démontrer la non désirés de rendu. Dans le cas réel, il n'y a pas de largeur fixe.

Answer 1

La bonne façon de le faire est avec la rupture à l'intérieur d'une propriété CSS:

.x li {
    break-inside: avoid-column;
}

Malheureusement, aucun navigateur prend actuellement en charge cette. Avec Chrome, j'ai pu utiliser, mais je ne pouvais pas faire quelque chose qui fonctionne pour Firefox (Voir Bug 549114):

.x li {
    -webkit-column-break-inside: avoid;
}

La solution de contournement que vous pouvez faire pour Firefox, si nécessaire, est d'envelopper votre de non-rupture de contenu dans un tableau, mais c'est vraiment, vraiment terrible solution si vous pouvez l'éviter.

Mise à JOUR

Selon le rapport de bug mentionné ci-dessus, Firefox 20+ prend en charge l' page-break-inside: avoid comme un mécanisme pour éviter les sauts de colonne à l'intérieur d'un élément, mais je n'ai pas vu à l'oeuvre. Voir http://jsfiddle.net/bnickel/5qwMf/.

Comme d'autres mentionnent, vous pouvez le faire overflow: hidden ou display: inline-block mais cela supprime les balles montré dans la question d'origine. Votre solution va varier en fonction de ce que vos objectifs sont.

Answer 2

Ajout ;

à l’enfant des éléments empêchera leur étant répartie entre les colonnes.

Answer 3

jeu suivant le style de l’élément que vous ne voulez pas casser :

Answer 4

Dès octobre 2014, break-inside semble toujours être bogué dans Firefox et IE 10-11. Toutefois, ajoute le débordement : caché à l’élément, ainsi que la pause-intérieur : éviter, semble pour le faire fonctionner dans Firefox et IE 10-11. Je suis actuellement en utilisant :

Answer 5

Firefox supporte maintenant ceci :

Cela résout le problème des éléments briser sur colonnes.