Comment empêcher la rupture de colonne dans un élément?

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.

La façon correcte de le faire est d'utiliser la propriété CSS de rupture :

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

Malheureusement, depuis octobre 2019, cela n'est pas pris en charge dans Firefox, mais il est pris en charge par tous les autres principaux navigateurs . Avec Chrome, j'ai pu utiliser le code ci-dessus, mais je n'ai rien pu faire pour Firefox ( voir bug 549114 ).

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

METTRE À JOUR

Selon le rapport de bogue mentionné ci-dessus, Firefox 20+ prend page-break-inside: avoiden charge comme mécanisme pour éviter les sauts de colonne à l'intérieur d'un élément, mais l'extrait de code ci-dessous montre qu'il ne fonctionne toujours pas avec les listes:

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

.x ul {
    margin: 0;
}

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

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Comme d'autres le mentionnent, vous pouvez faire overflow: hiddenoudisplay: inline-block mais cela supprime les balles affichées dans la question d'origine. Votre solution variera en fonction de vos objectifs.

MISE À JOUR 2 Étant donné que Firefox empêche la rupture display:tableet display:inline-blockqu'une solution fiable mais non sémantique serait d'encapsuler chaque élément de la liste dans sa propre liste et d'y appliquer la règle de style:

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

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

Ajouter;

display: inline-block;

aux éléments enfants les empêcheront d'être divisés entre les colonnes.

définissez le style de l'élément que vous ne voulez pas casser suivant:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

En octobre 2014, l'effraction semble toujours boguée dans Firefox et IE 10-11. Cependant, l'ajout de débordement: caché à l'élément, ainsi que l'effraction: éviter, semble le faire fonctionner dans Firefox et IE 10-11. J'utilise actuellement:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Firefox prend désormais en charge ceci:

page-break-inside: avoid;

Cela résout le problème des éléments qui traversent les colonnes.

La réponse acceptée a maintenant deux ans et les choses semblent avoir changé.

Cet article explique l'utilisation de la column-break-insidepropriété. Je ne peux pas dire comment ou pourquoi cela diffère break-inside, car seul ce dernier semble être documenté dans la spécification W3. Cependant, Chrome et Firefox prennent en charge les éléments suivants:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

Cela fonctionne pour moi en 2015:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

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

Le code suivant fonctionne pour empêcher les sauts de colonne à l'intérieur des éléments:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

En 2019, cela fonctionne pour moi sur Chrome, Firefox et Opera (après de nombreuses autres tentatives infructueuses):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

Firefox 26 semble nécessiter

page-break-inside: avoid;

Et Chrome 32 a besoin

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

J'ai eu le même problème, je pense, et j'ai trouvé une solution:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

Fonctionne également dans FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Une solution de contournement possible pour Firefox est de définir la propriété CSS "affichage" de l'élément dans lequel vous ne voulez pas de pause à "table". Je ne sais pas si cela fonctionne pour la balise LI (vous perdrez probablement la liste -item-style), mais cela fonctionne pour la balise P.

Je viens de corriger quelques divs qui se divisaient sur la colonne suivante en ajoutant

overflow: auto

à l'enfant divs.

* Réalisé, il ne le corrige que dans Firefox!

J'ai rencontré le même problème lors de l'utilisation des colonnes de carte

je l'ai réparé en utilisant

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

<style>
ul li{display: table;}  
</style>

fonctionne parfaitement

J'ai fait une mise à jour de la réponse réelle.

Cela semble fonctionner sur Firefox et Chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Remarque: La propriété float semble être celle qui fait le comportement du bloc.

Cette réponse pourrait ne s'appliquer qu'à certaines circonstances; Si vous définissez une hauteur pour vos éléments, celle-ci sera respectée par le style des colonnes. Là-bas en gardant tout ce qui est contenu dans cette hauteur à une rangée.

J'avais une liste, comme l'op, mais elle contenait deux éléments, des éléments et des boutons pour agir sur ces éléments. Je l' ai traité comme une table <ul> - table, <li> - table-row, <div> - table-cellmis l'UL dans une mise en page 4 de la colonne. Les colonnes étaient parfois divisées entre l'élément et ses boutons. L'astuce que j'ai utilisée était de donner aux éléments Div une hauteur de ligne pour couvrir les boutons.