Bagaimanakah Saya Boleh Mencegah Pecah Lajur Dalam Elemen Senarai dalam CSS?

Mencegah Pecah Lajur Dalam Elemen

Matlamatnya adalah untuk menghalang kandungan daripada merentas berbilang lajur dalam elemen, memastikan pemaparan yang diingini. Pertimbangkan contoh di bawah:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Perenderan dalam Firefox:

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

Matlamatnya ialah untuk mencapai pemaparan yang menghalang pemecahan kandungan, menghasilkan pemaparan yang lebih padu paparan:

• 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

Penyelesaian terletak pada penggunaan ciri CSS pecah dalam:

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

Harta ini disokong oleh semua pelayar utama kecuali Firefox. Dalam Firefox, penyelesaian menggunakan jadual boleh digunakan, tetapi ia bukan penyelesaian yang ideal.

Kemas kini

Firefox 20 kini menyokong page-break-inside: elakkan untuk mengelakkan pemecahan lajur, tetapi kod berikut menunjukkan bahawa ia masih tidak berfungsi dengan berkesan senarai:

CSS:

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

HTML:

<div></div>