Bagaimana mencegah pemutusan kolom dalam suatu elemen?

Pertimbangkan HTML berikut:

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

dan CSS berikut:

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

Seperti berdiri, Firefox saat ini membuat ini mirip dengan yang berikut:

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

Perhatikan bahwa item keempat terpecah antara kolom kedua dan ketiga. Bagaimana saya mencegahnya?

Render yang diinginkan mungkin terlihat seperti:

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

atau

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

Sunting: Lebar hanya ditentukan untuk menunjukkan render yang tidak diinginkan. Dalam kasus nyata, tentu saja tidak ada lebar tetap.

Cara yang benar untuk melakukan ini adalah dengan properti CSS pembobolan :

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

Sayangnya, pada Oktober 2019, ini tidak didukung di Firefox tetapi didukung oleh setiap browser utama lainnya . Dengan Chrome, saya dapat menggunakan kode di atas, tetapi saya tidak dapat membuat apa pun berfungsi untuk Firefox ( Lihat Bug 549114 ).

Solusi yang dapat Anda lakukan untuk Firefox jika perlu adalah membungkus konten Anda yang tidak melanggar dalam sebuah tabel, tetapi itu adalah solusi yang sangat, sangat mengerikan jika Anda bisa menghindarinya.

MEMPERBARUI

Menurut laporan bug yang disebutkan di atas, Firefox 20+ mendukung page-break-inside: avoidsebagai mekanisme untuk menghindari jeda kolom di dalam suatu elemen tetapi potongan kode di bawah ini menunjukkan masih tidak berfungsi dengan daftar:

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

Seperti yang disebutkan orang lain, Anda dapat melakukan overflow: hiddenatau display: inline-blocktetapi ini menghilangkan peluru yang ditunjukkan dalam pertanyaan asli. Solusi Anda akan bervariasi berdasarkan pada apa tujuan Anda.

UPDATE 2 Karena Firefox tidak mencegah kerusakan display:tabledan display:inline-blocksolusi yang dapat diandalkan tetapi non-semantik adalah untuk membungkus setiap item daftar dalam daftar sendiri dan menerapkan aturan gaya di sana:

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

Menambahkan;

display: inline-block;

elemen anak akan mencegah mereka terpecah antara kolom.

atur mengikuti gaya elemen yang tidak ingin Anda hancurkan:

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

Pada Oktober 2014, pembobolan tampaknya masih bermasalah di Firefox dan IE 10-11. Namun, menambahkan overflow: disembunyikan ke elemen, bersama dengan break-inside: avoid, tampaknya membuatnya bekerja di Firefox dan IE 10-11. Saat ini saya menggunakan:

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 sekarang mendukung ini:

page-break-inside: avoid;

Ini memecahkan masalah elemen yang melanggar kolom.

Jawaban yang diterima sekarang berusia dua tahun dan segala sesuatu tampaknya telah berubah.

Artikel ini menjelaskan penggunaan column-break-insideproperti. Saya tidak bisa mengatakan bagaimana atau mengapa ini berbeda break-inside, karena hanya yang terakhir yang tampaknya didokumentasikan dalam spesifikasi W3. Namun, Chrome dan Firefox mendukung yang berikut:

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

Ini bekerja untuk saya di 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>

Kode berikut berfungsi untuk mencegah pemutusan kolom di dalam elemen:

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

Pada tahun 2019, memiliki ini berfungsi untuk saya di Chrome, Firefox dan Opera (setelah banyak upaya gagal lainnya):

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

page-break-inside: avoid;

Dan kebutuhan Chrome 32

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

Saya punya masalah yang sama saya pikir dan menemukan solusi dalam hal ini:

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

Bekerja juga di FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Solusi yang mungkin untuk Firefox adalah mengatur "tampilan" properti CSS dari elemen yang tidak ingin Anda hilangkan di dalamnya menjadi "tabel". Saya tidak tahu apakah itu bekerja untuk tag LI (Anda mungkin akan kehilangan daftar -item-style), tetapi berfungsi untuk tag P.

Saya baru saja memperbaiki beberapa divs yang membelah ke kolom berikutnya dengan menambahkan

overflow: auto

untuk anak-anak div.

* Menyadari itu hanya memperbaikinya di Firefox!

Saya menghadapi masalah yang sama saat menggunakan kolom kartu

saya memperbaikinya menggunakan

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

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

bekerja dengan sempurna

Saya membuat pembaruan dari jawaban yang sebenarnya.

Ini tampaknya bekerja pada firefox dan 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 */
}

Catatan: The mengapung properti tampaknya menjadi orang yang membuat perilaku blok.

Jawaban ini mungkin hanya berlaku untuk keadaan tertentu; Jika Anda mengatur ketinggian ke elemen Anda, ini akan dipatuhi oleh gaya kolom. Di sana-dengan menjaga segala sesuatu yang terkandung dalam ketinggian itu menjadi satu baris.

Saya punya daftar, seperti op, tetapi berisi dua elemen, item dan tombol untuk bertindak atas item-item itu. Saya diperlakukan seperti meja <ul> - table, <li> - table-row, <div> - table-cellmenempatkan UL dalam tata letak 4 kolom. Kolom kadang-kadang dibagi antara item dan tombolnya. Trik yang saya gunakan adalah memberi elemen Div ketinggian garis untuk menutupi tombol.