Comment empêcher la rupture de colonne dans un élément?
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 les CSS suivants:
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
Dans l'état actuel des choses, Firefox le rend actuellement semblable à ce qui suit:
• 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 davantage à ceci:
• 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 est spécifiée uniquement pour illustrer le rendu indésirable. Dans le cas réel, bien sûr, il n'y a pas de largeur fixe.
La méthode correcte consiste à utiliser la propriété CSS break-inside :
.x li {
break-inside: avoid-column;
}
Malheureusement, aucun navigateur ne le supporte actuellement. Avec Chrome, j’étais capable d’utiliser ce qui suit, mais je ne pouvais rien faire fonctionner 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 consiste à envelopper votre contenu immuable dans un tableau, mais c'est une solution vraiment, vraiment terrible si vous pouvez l'éviter.
METTRE &AGRAVE; JOUR
Selon le rapport de bogue mentionné ci-dessus, Firefox 20+ prend en charge page-break-inside: avoid en tant que mécanisme permettant d'éviter les ruptures 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 {
-moz-column-count: 3;
-webkit-column-count: 3;
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 l'ont mentionné, vous pouvez utiliser overflow: hidden ou display: inline-block, mais cela supprime les puces présentées dans la question d'origine. Votre solution variera en fonction de vos objectifs.
UPDATE 2 Étant donné que Firefox empêche la rupture de display:table et display:inline-block, une solution fiable mais non sémantique consisterait à envelopper chaque élément de la liste dans sa propre liste et à 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 évitera leur scission entre les colonnes.
définissez comme suit le style de l'élément que vous ne voulez pas interrompre:
overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
Depuis octobre 2014, les intrusions semblent toujours poser problème dans Firefox et IE 10-11. Cependant, l’ajout de débordement: masqué à l’élément, ainsi que de l’intervention break-inside: Avoid, 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 supporte maintenant ceci:
page-break-inside: avoid;
Cela résout le problème des éléments traversant les colonnes.
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>La réponse acceptée a maintenant deux ans et les choses semblent avoir changé.
Cet article explique l'utilisation de la propriété column-break-inside. Je ne peux pas dire en quoi ni pourquoi cela diffère de 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;
}
Le code suivant empêche les sauts de colonne dans les é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;
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 rencontré le même problème en utilisant des colonnes de cartes
je l'ai réparé en utilisant
display: inline-flex ;
column-break-inside: avoid;
width:100%;
<style>
ul li{display: table;}
</style>
marche parfaitement
Je viens de corriger quelques divs qui se séparaient dans la colonne suivante en ajoutant
overflow: auto
à l'enfant divs.
* Réalisé, il ne le répare que dans Firefox!
J'ai eu le même problème je pense et trouvé une solution dans ceci:
-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
Travailler également dans FF 38.0.5: http://jsfiddle.net/rkzj8qnv/
Une solution de contournement possible pour Firefox consiste à définir la propriété CSS "display" de l'élément pour lequel vous ne souhaitez pas insérer de rupture dans "table". Je ne sais pas si cela fonctionne pour la balise LI (vous perdrez probablement la liste - style -item), mais cela fonctionne pour la balise P.
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;
}
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 rend le comportement de bloc.
Cette réponse pourrait ne s'appliquer qu'à certaines circonstances; Si vous définissez une hauteur pour vos éléments, le style de la colonne lui obéira. Là-bas, gardez tout ce qui est contenu dans cette hauteur en rangée.
J'avais une liste, comme l'opération, mais elle contenait deux éléments, des éléments et des boutons permettant d'agir sur ces éléments. Je l'ai traitée comme une table <ul> - table, <li> - table-row, <div> - table-cell mettre l'UL dans une disposition à 4 colonnes Les colonnes étaient parfois divisées entre l'élément et ses boutons. Le truc que j’ai utilisé était de donner aux éléments Div une hauteur de trait pour couvrir les boutons.