Düşünün aşağıdaki HTML:

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

ve aşağıdaki CSS:

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

Bu haliyle, Firefox şu anda bu benzer şekilde aşağıdaki gibi oluşturur:

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

Dördüncü maddenin ikinci ve üçüncü sütun arasındaki bölünmüş dikkat edin. Bunu nasıl engellerim?

İstenen işleme gibi bir şey daha olabilir:

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

ya

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

Düzenleme:Genişliği sadece istenmeyen görüntüsünü göstermek için belirtilen. Tabii ki gerçek bir durumda, sabit genişlik.

Bunu yapmak için doğru yolu break-inside CSS property ile

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

Ne yazık ki, hiçbir tarayıcı şu anda bunu destekler. Krom, aşağıdaki kullanma şansım oldu, ama hiçbir şey Firefox (See Bug 549114) için işe gelemedim:

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

Gerekirse Firefox için geçici bir tabloda olmayan sonu içerik sarmak için ama eğer bunu önleyebilirsiniz Eğer, gerçekten korkunç gerçekten bir çözümdür.

GÜNCELLEME

Hata raporu yukarıda belirtilen göre, Firefox 20, öğenin içinde sütun sonları kaçıyor ama kod parçacığının hala listelerle çalışma gösterir değil: için bir mekanizma olarak page-break-inside: avoid destekler

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

Başkalarına söz olarak, overflow: hidden display: inline-block yapabilirsiniz ama bu kurşunların asıl soruya gösterilen kaldırır. Çözüm hedeflerinize bağlı olarak değişir.

GÜNCELLEME 2Firefox display:table display:inline-block kesilmesini engeller beri güvenilir ama non-semantik bir çözüm kendi listesinde her madde sarın ve stil kuralı orada geçerli olacaktır:

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