Bir öğede sütun kırılması nasıl önlenir?

Aşağıdaki HTML'yi düşünün:

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

ve aşağıdaki CSS:

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

Halen Firefox bunu şu şekilde benzer hale getiriyor:

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

Dördüncü öğenin ikinci ve üçüncü sütun arasında bölündüğüne dikkat edin. Bunu nasıl önleyebilirim?

İstenen oluşturma daha çok şuna benzeyebilir:

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

veya

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

Düzenle: Genişlik yalnızca istenmeyen oluşturmayı göstermek için belirtilir. Gerçek durumda, elbette sabit bir genişlik yoktur.

Bunu yapmanın doğru yolu, içeri giren CSS özelliğidir :

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

Ne yazık ki, Ekim 2019'dan itibaren bu Firefox'ta desteklenmiyor, ancak diğer tüm büyük tarayıcılar tarafından destekleniyor . Chrome ile yukarıdaki kodu kullanabildim, ancak Firefox için hiçbir şey yapamadım ( Bkz. Hata 549114 ).

Gerekirse Firefox için yapabileceğiniz geçici çözüm, kırılmaz içeriğinizi bir tabloya sarmaktır, ancak bu, kaçınabiliyorsanız gerçekten korkunç bir çözümdür.

GÜNCELLEME

Yukarıda belirtilen hata raporuna göre, Firefox 20+ page-break-inside: avoidbir öğenin içindeki sütun kırılmalarını önlemek için bir mekanizma olarak destekliyor , ancak aşağıdaki kod snippet'i hala listelerle çalışmadığını gösteriyor:

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

Diğerlerinin de belirttiği gibi, yapabilirsiniz overflow: hiddenveya display: inline-blockancak bu, orijinal soruda gösterilen mermileri kaldırır. Çözümünüz, hedeflerinizin ne olduğuna bağlı olarak değişecektir.

GÜNCELLEME 2 Firefox kırılmayı önlediğinden display:tableve display:inline-blockgüvenilir ancak anlamsız bir çözüm, her liste öğesini kendi listesine sarmak ve stil kuralını oraya uygulamak olacaktır:

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

Ekleme;

display: inline-block;

alt öğelerin sütunlar arasında bölünmesini engelleyecektir.

aşağıdakileri kırmak istemediğiniz öğenin stiline göre ayarlayın:

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

Ekim 2014 itibariyle, alıştırmalar Firefox ve IE 10-11'de hala hatalı görünüyor. Bununla birlikte, taşma ekleme: öğeye gizlenmiş, içeriye girme ile birlikte: kaçının, Firefox ve IE 10-11'de çalıştığı görülüyor. Şu anda kullanıyorum:

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 şimdi bunu destekliyor:

page-break-inside: avoid;

Bu, sütunları aşan elemanlar sorununu çözer.

Kabul edilen cevap şimdi iki yaşında ve işler değişmiş gibi görünüyor.

Bu makalede , column-break-insidemülkün kullanımı açıklanmaktadır . Bunun nasıl veya neden farklı olduğunu söyleyemem break-inside, çünkü sadece ikincisi W3 spesifikasyonunda belgeleniyor gibi görünüyor. Ancak, Chrome ve Firefox aşağıdakileri destekler:

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

Bu 2015'te benim için çalışıyor:

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>

Aşağıdaki kod, öğelerin içindeki sütun kesmelerini önlemek için çalışır:

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

2019'da bunun Chrome, Firefox ve Opera'da benim için çalışmasını sağlamak (diğer birçok başarısız denemeden sonra):

.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 gerektiriyor gibi görünüyor

page-break-inside: avoid;

Ve Chrome 32 ihtiyaçları

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

Ben düşünüyorum aynı sorun vardı ve bu bir çözüm buldum:

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

FF 38.0.5'te de çalışıyor: http://jsfiddle.net/rkzj8qnv/

Firefox için olası bir geçici çözüm, içinde bir ara vermek istemediğiniz öğenin CSS özelliğini "display" olarak ayarlamak "table" olarak ayarlanmıştır. LI etiketi için çalışıp çalışmadığını bilmiyorum (muhtemelen liste -item tarzı kaybedersiniz), ancak P etiketi için çalışır.

Sadece divekleyerek bir sonraki sütuna bölen bazı s düzeltildi

overflow: auto

çocuğa div.

* Sadece Firefox'ta düzelttiğini fark ettim!

Kart sütunlarını kullanırken aynı sorunla karşılaştım

kullanarak sabitledim

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

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

Mükemmel çalışıyor

Gerçek cevabı güncelledim.

Firefox ve krom üzerinde çalışıyor gibi görünüyor: 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 */
}

Not: şamandıra mülkiyet blok davranışı yapan kişi olarak görünmektedir.

Bu cevap yalnızca belirli durumlar için geçerli olabilir; Öğelerinize bir yükseklik ayarlarsanız, sütun stiline uyulur. Bu yükseklikteki her şeyi bir sıraya tutarak.

Op gibi bir listem vardı, ancak bu öğeler üzerinde hareket etmek için iki öğe, öğe ve düğme içeriyordu. Bir tablo gibi tedavi <ul> - table, <li> - table-row, <div> - table-cell4 kolon düzeninde UL koydu. Sütunlar bazen öğe ve düğmeleri arasında bölünüyordu. Kullandığım numara, Div öğelerine düğmeleri kaplayacak bir satır yüksekliği vermekti.