Jak zapobiec rozbiciu kolumny w elemencie?

Rozważ następujący kod HTML:

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

oraz następujący CSS:

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

W obecnej formie Firefox renderuje to podobnie do następującego:

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

Zauważ, że czwarty element został podzielony na drugą i trzecią kolumnę. Jak temu zapobiec?

Pożądane renderowanie może wyglądać mniej więcej tak:

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

lub

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

Edycja: szerokość jest określona tylko w celu zademonstrowania niechcianego renderowania. W prawdziwym przypadku oczywiście nie ma stałej szerokości.

Prawidłowym sposobem na to jest włamanie do właściwości CSS :

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

Niestety, od października 2019 r. Nie jest to obsługiwane w przeglądarce Firefox, ale jest obsługiwane przez każdą inną dużą przeglądarkę . W Chrome mogłem użyć powyższego kodu, ale nie mogłem nic zrobić dla Firefoksa ( zobacz Bug 549114 ).

Obejście, które możesz zrobić dla Firefoksa, jeśli to konieczne, polega na owinięciu niełamliwych treści w tabelę, ale jest to naprawdę, naprawdę straszne rozwiązanie, jeśli możesz tego uniknąć.

AKTUALIZACJA

Według wspomnianego wyżej raportu o błędach Firefox 20+ obsługuje page-break-inside: avoidjako mechanizm unikania podziałów kolumn wewnątrz elementu, ale poniższy fragment kodu pokazuje, że nadal nie działa z listami:

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

Jak inni wspomnieć, można to zrobić overflow: hiddenalbo display: inline-blockale ten usuwa kul widoczne na oryginalne pytanie. Twoje rozwiązanie będzie się różnić w zależności od twoich celów.

AKTUALIZACJA 2 Ponieważ Firefox nie włącza się, display:tablea display:inline-blockniezawodnym, ale nie semantycznym rozwiązaniem byłoby zawinięcie każdego elementu listy do osobnej listy i zastosowanie tam reguły stylu:

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

Dodawanie;

display: inline-block;

do elementów potomnych zapobiegnie ich podziałowi między kolumnami.

ustaw styl elementu, którego nie chcesz łamać:

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

Od października 2014 włamanie nadal wydaje się być wadliwe w Firefoksie i IE 10-11. Jednak dodanie przepełnienia: ukrytego do elementu wraz z włamaniem: unikaj, wydaje się, że działa w Firefox i IE 10-11. Obecnie używam:

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 obsługuje teraz to:

page-break-inside: avoid;

Rozwiązuje to problem z podziałem elementów na kolumny.

Akceptowana odpowiedź ma teraz dwa lata i wydaje się, że wszystko się zmieniło.

W tym artykule wyjaśniono korzystanie z column-break-insidewłaściwości. Nie mogę powiedzieć, w jaki sposób i dlaczego to się różni break-inside, ponieważ tylko ta ostatnia wydaje się być udokumentowana w specyfikacji W3. Jednak Chrome i Firefox obsługują następujące funkcje:

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

To działa dla mnie w 2015 roku:

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>

Poniższy kod działa, aby zapobiec łamaniu kolumn wewnątrz elementów:

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

W 2019 roku to działa dla mnie w Chrome, Firefox i Opera (po wielu innych nieudanych próbach):

.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;
}

Wydaje się, że Firefox 26 wymaga

page-break-inside: avoid;

I potrzebuje Chrome 32

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

Myślę, że miałem ten sam problem i znalazłem rozwiązanie w tym:

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

Działa również w FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Możliwym obejściem dla Firefoksa jest ustawienie właściwości CSS „display” elementu, w którym nie chcesz mieć przerwy, na „table”. Nie wiem, czy to działa dla tagu LI (prawdopodobnie stracisz styl listy -item), ale działa dla tagu P.

Właśnie naprawiłem niektóre divs, które dzieliły się na następną kolumnę, dodając

overflow: auto

dla dziecka divs.

* Zrozumiałem, że to naprawia tylko w Firefoksie!

Napotkałem ten sam problem podczas korzystania z kolumn kart

naprawiłem to za pomocą

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

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

działa świetnie

Dokonałem aktualizacji faktycznej odpowiedzi.

Wydaje się, że działa to na Firefox i 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 */
}

Uwaga: Właściwość float wydaje się być tą, która powoduje zachowanie bloku.

Ta odpowiedź może dotyczyć tylko niektórych okoliczności; Jeśli ustawisz wysokość swoich elementów, będzie to zgodne ze stylem kolumny. Tam utrzymując wszystko, co jest zawarte na tej wysokości, w jednym rzędzie.

Miałem listę, taką jak operacja, ale zawierała dwa elementy, elementy i przyciski do działania na te elementy. Traktowałem go jak stół <ul> - table, <li> - table-row, <div> - table-cellumieścić UL w układzie 4 kolumny. Czasami kolumny były dzielone między przedmiot a przyciski. Sztuczka, której użyłem, polegała na nadaniu elementom Div wysokości linii pokrywającej przyciski.