html - quitar - salto de linea tooltip

¿Cómo prevenir el salto de columna dentro de un elemento?

Question

Considere el siguiente 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>

y el siguiente CSS:

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

Tal como está, Firefox actualmente presenta esto de manera similar a lo siguiente:

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

Observe que el cuarto elemento se dividió entre la segunda y la tercera columna. ¿Cómo puedo prevenir eso?

El renderizado deseado podría verse algo más como:

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

o

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

Edición: el ancho solo se especifica para demostrar la representación no deseada. En el caso real, por supuesto, no hay un ancho fijo.

Answer 1

A partir de octubre de 2014, el allanamiento todavía parece tener errores en Firefox e IE 10-11. Sin embargo, agregar desbordamiento: oculto al elemento, junto con el robo de dentro: evitar, parece hacer que funcione en Firefox e IE 10-11. Actualmente estoy 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;

Answer 2

Añadiendo

display: inline-block;

a los elementos hijos evitará que se dividan entre columnas.

Answer 3

Acabo de arreglar algunos div que se dividían en la siguiente columna agregando

overflow: auto

al niño div s.

* Se dio cuenta de que solo lo arregla en Firefox!

Answer 4

El siguiente código funciona para evitar saltos de columna dentro de los 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;

Answer 5

Esta respuesta solo puede aplicarse a ciertas circunstancias; Si establece una altura para sus elementos, esto será obedecido por el estilo de la columna. Ahí, manteniendo todo lo que está contenido dentro de esa altura en una fila.

Tenía una lista, como la operación, pero contenía dos elementos, elementos y botones para actuar sobre esos elementos. Lo traté como una tabla <ul> - table , <li> - table-row , <div> - table-cell colocó el UL en un diseño de 4 columnas. Las columnas a veces se dividían entre el elemento y sus botones. El truco que utilicé fue dar a los elementos Div una altura de línea para cubrir los botones.

Answer 6

Establezca el siguiente en el estilo del elemento que no desea romper:

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

Answer 7

Esto me funciona en 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>

Answer 8

Firefox 26 parece requerir

page-break-inside: avoid;

Y Chrome 32 necesita

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

Answer 9

Firefox ahora soporta esto:

page-break-inside: avoid;

Esto resuelve el problema de los elementos que se dividen en columnas.

Answer 10

Hice una actualización de la respuesta real.

Esto parece estar funcionando en Firefox y 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: la propiedad float parece ser la que realiza el comportamiento del bloque.

Answer 11

La forma correcta de hacer esto es con la propiedad CSS que se abre paso :

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

Desafortunadamente, ningún navegador soporta esto actualmente. Con Chrome, pude usar lo siguiente, pero no pude hacer que nada funcionara para Firefox ( Ver Error 549114 ):

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

La solución que puede hacer para Firefox, si es necesario, es envolver su contenido no relevante en una tabla, pero esa es una solución realmente terrible si puede evitarlo.

ACTUALIZAR

De acuerdo con el informe de errores mencionado anteriormente, Firefox 20+ soporta page-break-inside: avoid como un mecanismo para evitar saltos de columna dentro de un elemento, pero el siguiente fragmento de código demuestra que aún no funciona con listas:

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

Como otros lo mencionan, puede hacer overflow: hidden o display: inline-block pero esto elimina las viñetas que se muestran en la pregunta original. Su solución variará según cuáles sean sus objetivos.

ACTUALIZACIÓN 2 Dado que Firefox evita que se rompa en la display:table y display:inline-block una solución confiable pero no semántica sería envolver cada elemento de la lista en su propia lista y aplicar la regla de estilo allí:

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

Answer 12

La respuesta aceptada tiene ahora dos años y las cosas parecen haber cambiado.

Este artículo explica el uso de la propiedad column-break-inside . No puedo decir cómo o por qué esto difiere de la break-inside , porque solo esta última parece estar documentada en la especificación W3. Sin embargo, Chrome y Firefox admiten lo siguiente:

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

Answer 13

Me enfrenté al mismo problema al utilizar las columnas de la tarjeta

lo arreglé usando

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

Answer 14

Tuve el mismo problema que creo y encontré una solución en esto:

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

Trabajando también en FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Answer 15

Una posible solución para Firefox es configurar la "visualización" de la propiedad CSS del elemento en el que no desea que haya una ruptura dentro de "tabla". No sé si funciona para la etiqueta LI (probablemente perderá la lista, es decir, estilo), pero funciona para la etiqueta P.

Answer 16

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

funciona perfectamente