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.
Réponses:
La façon correcte de le faire est d'utiliser la propriété CSS de rupture :
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: avoid
en 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:Afficher l'extrait de code
Comme d'autres le mentionnent, vous pouvez faire
overflow: hidden
oudisplay: 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:table
etdisplay:inline-block
qu'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:la source
break-inside: avoid-column
page-break-inside:avoid
devrait fonctionner en FF 20.-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
overflow: hidden
c'est la meilleure option.display: inline-block;
provoque malheureusement de nouvelles bizarreries avec Chrome.Ajouter;
aux éléments enfants les empêcheront d'être divisés entre les colonnes.
la source
display:block
élément. Ce sera probablement une solution de contournement de Firefox solide pour l'instant.<li>
mais j'ai dû ajouterwidth:100%;
pour les empêcher de s'empiler horizontalement.définissez le style de l'élément que vous ne voulez pas casser suivant:
la source
overflow:hidden
règle n'est pas une solution pour les autres règles, il est ce qui provoque la mise en page insécable ...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:
la source
Firefox prend désormais en charge ceci:
Cela résout le problème des éléments qui traversent les colonnes.
la source
page-break-before:
oupage-break-after:
nonpage-break-inside:
La réponse acceptée a maintenant deux ans et les choses semblent avoir changé.
Cet article explique l'utilisation de la
column-break-inside
propriété. Je ne peux pas dire comment ou pourquoi cela diffèrebreak-inside
, car seul ce dernier semble être documenté dans la spécification W3. Cependant, Chrome et Firefox prennent en charge les éléments suivants:la source
Cela fonctionne pour moi en 2015:
la source
ul
éléments, est affiché sur des tours CSS: css-tricks.com/almanac/properties/b/break-inside et semble correcte en fonction des notes de compatibilité caniuse: « Un soutien partiel fait référence à ne pas soutenir labreak-before
,break-after
,break-inside
propriétés . Les navigateurs WebKit et Blink prennent en charge de manière équivalente les-webkit-column-break-*
propriétés non standard pour obtenir le même résultat (mais uniquement les valeursauto
etalways
). Firefox ne prend pas en chargebreak-*
mais prend en charge lespage-break-*
propriétés pour obtenir le même résultat. "Le code suivant fonctionne pour empêcher les sauts de colonne à l'intérieur des éléments:
la source
En 2019, cela fonctionne pour moi sur Chrome, Firefox et Opera (après de nombreuses autres tentatives infructueuses):
la source
Firefox 26 semble nécessiter
Et Chrome 32 a besoin
la source
J'ai eu le même problème, je pense, et j'ai trouvé une solution:
Fonctionne également dans FF 38.0.5: http://jsfiddle.net/rkzj8qnv/
la source
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.
la source
Je viens de corriger quelques
div
s qui se divisaient sur la colonne suivante en ajoutantà l'enfant
div
s.* Réalisé, il ne le corrige que dans Firefox!
la source
J'ai rencontré le même problème lors de l'utilisation des colonnes de carte
je l'ai réparé en utilisant
la source
fonctionne parfaitement
la source
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/
Remarque: La propriété float semble être celle qui fait le comportement du bloc.
la source
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-cell
mis 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.la source