Как предотвратить разрыв столбца в элементе?

Рассмотрим следующий 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>

и следующий CSS:

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

В его нынешнем виде Firefox отображает это аналогично следующему:

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

Обратите внимание, что четвертый элемент был разделен между вторым и третьим столбцами. Как мне предотвратить это?

Желаемый рендеринг может выглядеть примерно так:

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

или

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

Изменить: Ширина указана только для демонстрации нежелательного рендеринга. В реальном случае, конечно, нет фиксированной ширины.