Bagaimana untuk Mencegah Kandungan daripada Memecah Lajur CSS?

Cara Mencegah Pecah Lajur Dalam Elemen: Panduan Komprehensif

Masalah:
Dalam reka bentuk web, apabila kandungan diformat menggunakan Lajur CSS, kandungan mungkin dibalut antara lajur, menghasilkan kesan visual yang tidak diingini. Sebagai contoh, senarai boleh dipecahkan merentas berbilang lajur, mengganggu kesinambungannya.

Penyelesaian:
Untuk mengelakkan pemecahan yang tidak diingini ini, sifat CSS pecah dalam boleh digunakan. Dengan menetapkannya untuk mengelak-lajur, penyemak imbas diarahkan untuk menyimpan kandungan dalam lajur yang sama apabila boleh.

Contoh:
Untuk mengelakkan pemisah baris dalam item senarai dalam berbilang- reka letak lajur:

.list-container {
    column-count: 3;
}

.list-container li {
    break-inside: avoid-column;
}

Pelayar Sokongan:
Malangnya, mulai Oktober 2021, Firefox tidak menyokong sepenuhnya pecah masuk: avoid-column. Walau bagaimanapun, sifat ini disokong oleh semua penyemak imbas utama kecuali Firefox.

Penyelesaian untuk Firefox:
Untuk Firefox, penyelesaian boleh digunakan untuk menghalang pemecahan lajur dalam item senarai: membalut kandungan dalam jadual.

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>Number</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Number one, one, one, one, one</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Number two, two, two, two, two, two, two, two, two, two, two, two</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Number three</td>
            </tr>
        </tbody>
    </table>
</div>

.container {
    column-count: 3;
}

Nota: Penyelesaian ini ialah tidak sesuai, kerana ia boleh memperkenalkan penanda tambahan dan kerumitan penggayaan.

Kemas kini:
Kemas kini terbaharu Firefox 20 telah memperkenalkan sokongan untuk page-break-inside: elakkan, tetapi ini tidak belum menyelesaikan sepenuhnya isu menghalang pemecahan lajur dalam senarai. Pemantauan berterusan pembangunan penyemak imbas web adalah disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Kandungan daripada Memecah Lajur CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!