Vlámanie - Triky CSS | Almanach CSS 2025

Stĺpce odvádzajú skvelú prácu pri plynutí a vyvážení obsahu. Nie všetky prvky bohužiaľ plynú ladne. Niekedy sa prvky zaseknú medzi stĺpcami.

Našťastie môžete prehľadávaču povedať, aby uchovával konkrétne prvky spolu s break-inside.

li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )

V súčasnosti nehnuteľnosť všeobecne prijíma hodnoty autoa avoid.

Použite avoidna prvok v rámci rozloženia s viacerými stĺpcami, aby sa vlastnosť nerozpadla.

Prezrite si ešte jednu syntax tejto vlastnosti, pretože medzi prehliadačmi existujú určité odchýlky.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

Vlastnosť preberá vlastnosti zalomenia stránky a zdieľa rovnaké hodnoty. Zatiaľ používa Firefox page-break-inside.

Pozrite si príklad prieniku do stĺpca Pen (CSS-Tricks) od Katy DeCorah (@katydecorah) na CodePen.

Podpora prehľadávača

Vlastnosti zalomenia stránky:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
91	87	11	88	TP

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Podpora rozloženia viacerých stĺpcov:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.