Como evitar quebra de coluna dentro de um elemento?

Considere o seguinte 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>

e o seguinte CSS:

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

No momento, o Firefox atualmente processa isso da mesma forma que o seguinte:

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

Observe que o quarto item foi dividido entre a segunda e a terceira coluna. Como evito isso?

A renderização desejada pode parecer algo como:

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

ou

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

Editar: a largura é especificada apenas para demonstrar a renderização indesejada. No caso real, é claro que não há largura fixa.

A maneira correta de fazer isso é com a propriedade CSS invasora :

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

Infelizmente, a partir de outubro de 2019, isso não é suportado no Firefox, mas é suportado por todos os outros principais navegadores . Com o Chrome, eu pude usar o código acima, mas não consegui fazer nada funcionar no Firefox ( consulte Bug 549114 ).

A solução alternativa que você pode fazer para o Firefox, se necessário, é agrupar seu conteúdo ininterrupto em uma tabela, mas essa é uma solução realmente terrível se você puder evitá-lo.

ATUALIZAR

De acordo com o relatório de bug mencionado acima, o Firefox 20+ suporta page-break-inside: avoidcomo um mecanismo para evitar quebras de coluna dentro de um elemento, mas o trecho de código abaixo demonstra que ele ainda não está funcionando com listas:

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

Como outros mencionar, você pode fazer overflow: hiddenou display: inline-blockmas isso remove as balas mostrados na pergunta original. Sua solução variará de acordo com quais são seus objetivos.

ATUALIZAÇÃO 2 Como o Firefox impede a interrupção display:tablee display:inline-blockuma solução confiável, mas semântica, seria agrupar cada item da lista em sua própria lista e aplicar a regra de estilo:

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

Adicionando;

display: inline-block;

para os elementos filhos impedirá que eles sejam divididos entre colunas.

defina a seguir o estilo do elemento que você não deseja quebrar:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

Em outubro de 2014, a invasão ainda parece estar com problemas no Firefox e no IE 10-11. No entanto, a adição de overflow: hidden ao elemento, juntamente com o break-inside: evitar, parece fazê-lo funcionar no Firefox e IE 10-11. Atualmente, estou usando:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

O Firefox agora suporta isso:

page-break-inside: avoid;

Isso resolve o problema de elementos quebrando nas colunas.

A resposta aceita agora tem dois anos e as coisas parecem ter mudado.

Este artigo explica o uso da column-break-insidepropriedade Não sei dizer como ou por que isso difere break-inside, porque apenas o último parece estar documentado na especificação W3. No entanto, o Chrome e o Firefox suportam o seguinte:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

Isso funciona para mim em 2015:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

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

O código a seguir funciona para impedir quebras de coluna dentro de elementos:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

Em 2019, ter isso funciona para mim no Chrome, Firefox e Opera (depois de muitas outras tentativas malsucedidas):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

O Firefox 26 parece exigir

page-break-inside: avoid;

E o Chrome 32 precisa

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

Eu tive o mesmo problema que eu acho e encontrei uma solução nisso:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

Trabalhando também no FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Uma possível solução alternativa para o Firefox é definir a propriedade CSS "display" do elemento que você não deseja interromper como "table". Não sei se funciona para a tag LI (você provavelmente perderá a lista-item-style), mas funciona para a tag P.

Eu apenas consertei alguns divs que estavam se dividindo na próxima coluna adicionando

overflow: auto

para a criança divs.

* Percebi que só o corrige no Firefox!

Eu enfrentei o mesmo problema ao usar colunas de cartão

eu consertei usando

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

<style>
ul li{display: table;}  
</style>

funciona perfeitamente

Eu fiz uma atualização da resposta real.

Isso parece estar funcionando no firefox e no chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Nota: A propriedade float parece ser a responsável pelo comportamento do bloco.

Essa resposta pode se aplicar apenas a determinadas circunstâncias; Se você definir uma altura para seus elementos, isso será obedecido pelo estilo da coluna. Mantendo tudo o que está contido nessa altura em uma linha.

Eu tinha uma lista, como o op, mas continha dois elementos, itens e botões para atuar sobre esses itens. Tratei-o como uma tabela <ul> - table, <li> - table-row, <div> - table-cellcolocar o UL em um layout 4 coluna. Às vezes, as colunas eram divididas entre o item e seus botões. O truque que usei foi dar aos elementos Div uma altura de linha para cobrir os botões.