Bagaimana untuk Menghalang Item Senarai daripada Memecah Merentas Lajur dalam Reka Letak Berbilang Lajur?

Mencegah Pecah Lajur Dalam Elemen

Dalam susun atur berbilang lajur, anda mungkin menghadapi keadaan di mana item senarai individu pecah merentas lajur. Untuk mengelakkan tingkah laku yang tidak diingini ini, sifat CSS pecah-dalam boleh digunakan.

Menggunakan pecah-dalam

Khususnya, menetapkan pecah-dalam: lajur-elak untuk elemen item senarai akan memastikan bahawa ia disimpan utuh dalam satu lajur:

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

Keserasian Firefox Isu

Malangnya, mulai Oktober 2021, Firefox tidak menyokong harta pecah masuk. Walaupun anda boleh menggunakannya dalam penyemak imbas utama yang lain, anda memerlukan penyelesaian untuk Firefox.

Penyelesaian untuk Firefox

Penyelesaian yang kurang diingini untuk Firefox ialah membungkus kandungan tidak pecah dalam jadual:

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Sokongan Firefox 20 (Sebahagian)

Firefox 20 memperkenalkan sokongan untuk page-break-inside: elakkan, tetapi ia tidak menyelesaikan sepenuhnya masalah dengan senarai. Kod berikut menunjukkan bahawa ia masih memecahkan item:

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

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Senarai daripada Memecah Merentas Lajur dalam Reka Letak Berbilang Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!