it-swarm-id.com

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

Saat ini, 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

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

226
Timwi

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

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

Sayangnya, saat ini tidak ada browser yang mendukung ini. Dengan Chrome, saya dapat menggunakan yang berikut ini, tetapi saya tidak dapat membuat sesuatu berfungsi untuk Firefox ( Lihat Bug 549114 ):

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

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.

PERBARUI

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

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    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: hidden atau display: inline-block tetapi ini menghilangkan peluru yang ditunjukkan pada pertanyaan awal. Solusi Anda akan bervariasi berdasarkan pada apa tujuan Anda.

PEMBARUAN 2 Karena Firefox tidak mencegah pemecahan pada display:table dan display:inline-block solusi yang dapat diandalkan tetapi non-semantik adalah 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>

329
Brian Nickel

Menambahkan;

display: inline-block;

elemen anak akan mencegah mereka terpecah antara kolom.

154
Steve

atur mengikuti gaya elemen yang tidak ingin Anda hancurkan:

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

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;
21
VerticalGrain

Firefox sekarang mendukung ini:

page-break-inside: avoid;

Ini memecahkan masalah elemen yang melanggar kolom.

10
paul haine

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>

9

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

Artikel ini menjelaskan penggunaan properti column-break-inside. Saya tidak bisa mengatakan bagaimana atau mengapa ini berbeda dari break-inside, karena hanya yang terakhir yang 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;
}
9
keithjgrant

Kode berikut berfungsi untuk mencegah kerusakan 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;
3
StellarDoor5319

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;
2
MAP

Saya menghadapi masalah yang sama saat menggunakan kolom kartu 

saya memperbaikinya menggunakan 

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
1
Mysterious_Anny
<style>
ul li{display: table;}  
</style>

bekerja dengan sempurna

1
Tahir

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

overflow: auto

untuk divs anak.

* Menyadari itu hanya memperbaikinya di Firefox!

1
mateostabio

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/

1
dichterDichter

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.

1
Christopher

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;
}
0
Gašper Čefarin

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: Properti float tampaknya menjadi orang yang membuat perilaku blok.

0
Gatsbimantico

Jawaban ini mungkin hanya berlaku untuk keadaan tertentu; Jika Anda mengatur ketinggian 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 memperlakukannya seperti tabel <ul> - table, <li> - table-row, <div> - table-cell menempatkan 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.

0
Tod